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.

Answer 1

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