Conditionally apply css with ng-repeat?

Question

I have a data like this:

$scope.datas= [["inProgressCounter","31"],["approvedCounter","3"],["pendingCounter","35"],["rejectedCounter","0"]]

show them with ng-repeat:
<ul>
 <li ng-repeat="info in datas">{{info[0]}}{{info[1]}}</li>
</ul>

Now there are 2 requirement.

1, Each li has its own css style, such as, the first li always has biggest font-size, and last li always has smallest font-size.

2, I have to apply different css style to itself base on data. For example:

if {{info[1]}} ="aaa" it always has green color style, no matter it is placed in first or last or mid. So simply say: the #1 requires a fixed css style from fist li to last li, and #2 requires apply css depends on content of data, it always go with the li which contains the center data.

using ngClass required him to create a class for every possible outcome, nyStyle is more versatile when it comes to dynamic styling — Delta
– Delta, Commented Feb 19, 2015 at 15:34

Delta · Accepted Answer · 2015-02-19 15:39:05Z

3

You could use ngStyle for example in order to get your green color as a background.

ng-style="{backgroundColor: $scope.getBackgroundColor(info[2])}"

$scope.getBackgroundColor(value)
{
 if(value == 'aaa')
   return 'red';
 if(value == 'bbb')
   return 'blue';
 return 'white'
}

and the same thing can be done with font size using $index

edited Feb 19, 2015 at 15:39

answered Feb 19, 2015 at 15:23

Delta

8611 gold badge6 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

linyuanxie Over a year ago

but the problem is there are many types of content. {{info[1]}} could be aaa or could be bbb or ccc, and if it is aaa,it always has red color,if it is bbb, it always has green color. I need to do it to all li.

Delta Over a year ago

you will need to program all that some where, that is where the $scope.getBackgroundColor(info[2]) comes from. in your scope create a method called getBackgroundColor(value) { if(value == 'aaa') return 'red'; } there is no magic code to read you mind and pick the color you expect.

linyuanxie Over a year ago

ok, I got you, there is no way to do it with easy way, I thought I can simply apply css like this, so I have to creat function check the value and then return the color which match that content?

Delta Over a year ago

yeah, there is no standard aaa = backgroundcolor: red. well unless you are wanting the values on the variable to be rgb in that case you should be able to do backgroundColor: '#' + info[2] where info[2] is a 6 digit hex number.

Dmitriy T · Accepted Answer · 2015-02-19 15:38:47Z

3

Use the $first, $last and $index properties of the iterator:

    <ul>
     <li ng-repeat="info in datas"
         ng-class="{ 'big-font': $first,
                     'average-font': $index == 2,
                     'small-font': $last,
                     'red-color': datas[$index][1] == '35' }">{{ info[0] }}{{ info[1] }}</li>
    </ul>

Here's a working JSFiddle example: http://jsfiddle.net/npnyL5e1/

If you don't want to define a condition for each data ('red-color': datas$index == '35') then you can define your CSS classes based on your data and apply that data as classes to the elements, ex:

<ul>
     <li ng-repeat="info in datas"
         ng-class="{ 'big-font': $index == 0,
                     'small-font': $last,
                     'red-color': datas[$index][1] == '35' }"
         class="data-{{ info[0] }}">{{ info[0] }}{{ info[1] }}</li>
</ul>

and in your CSS:

.data-inProgressCounter {
    color: red;
}

.data-approvedCounter {
    color: green;
}

edited Feb 19, 2015 at 15:38

answered Feb 19, 2015 at 15:31

Dmitriy T

2011 silver badge5 bronze badges

4 Comments

linyuanxie Over a year ago

I think we are close! but the only problem is for #2 requirement, I have many data, let's say, I have 4 kind of data: a,b,c,d. if {{info[1]}}=a it is always has class A, if {{info[1]}}=b, it always has class B. if = c, always class C, if =d, always has class D.

Dmitriy T Over a year ago

I've updated the answer, but you'll basically have to either define all the conditions or define CSS classes for your data, ex: class="data-{{ info[0] }}" and in CSS: .data-inProgressCounter { color: red; } .data-approvedCounter { color: green; } I've prefixed the classes with "data-" just to be clear, but it's not required and you can use something else

linyuanxie Over a year ago

Thank you man, your solution is also good, but I only can chose one. But again thank you very much for helping me out.

Dmitriy T Over a year ago

Vote up if you find it useful ;)

AdminAffe · Accepted Answer · 2015-02-19 15:26:55Z

0

Try something like

<ul>
    <li data-ng-repeat="info in data" data-ng-class="{'someClass1': $first, 'someClass2': $last, 'someClass3': info[0] === 'aaa'}">
    {{info[0]}}{{info[1]}}
</li>

answered Feb 19, 2015 at 15:26

AdminAffe

1361 silver badge9 bronze badges

2 Comments

linyuanxie Over a year ago

yes, actually for #1 requirement I can ust $index, like: <li ng-class={{$index}}>{{info[]0}}{{info[1]}}</li> but how about #2 requirement? there are many li in the loop, not only 2.

AdminAffe Over a year ago

Then try to put the needed style within the data ["counter", "137", "color: #123456"] or write a method like Delta suggested.

Collectives™ on Stack Overflow

Conditionally apply css with ng-repeat?

1, Each li has its own css style, such as, the first li always has biggest font-size, and last li always has smallest font-size.

2, I have to apply different css style to itself base on data. For example:

3 Answers 3

4 Comments

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1, Each li has its own css style, such as, the first li always has biggest font-size, and last li always has smallest font-size.

2, I have to apply different css style to itself base on data. For example:

3 Answers 3

4 Comments

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related