有条件地使用ng-repeat进行css？

Question

我有这样的数据：

$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>

现在有2项要求。

1，每个li都有自己的css样式，例如，第一个li总是具有最大的字体大小，而最后一个li总是具有最小的字体大小。

2，我必须根据数据对自己应用不同的css样式。例如：

if {{info [1]}} =＆＃34; aaa＆＃34;它始终具有绿色风格，无论它放在第一个或最后一个或中间。 所以简单地说：＃1需要从第一个li到最后一个li的固定css样式，而＃2需要应用css取决于数据的内容，它总是与包含中心数据的li一起使用。

Answer 1

例如，您可以使用ngStyle将绿色作为背景。

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

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

使用$ index

可以使用字体大小完成相同的操作

Answer 2

使用迭代器的$ first，$ last和$ index属性：

    <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>

这是一个有效的JSFiddle示例：http://jsfiddle.net/npnyL5e1/

如果您不想为每个数据定义条件（'red-color'：datas $index =='35'），那么您可以根据数据定义CSS类并应用该数据作为元素的类，例如：

<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>

并在你的CSS中：

.data-inProgressCounter {
    color: red;
}

.data-approvedCounter {
    color: green;
}

Answer 3

尝试类似

的内容

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