有条件地使用 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、每一里都有自己的css风格，比如，第一里总是最大的字体，最后一里总是最小的字体。

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

if {{info[1]}} ="aaa" 无论放在first还是last还是mid，它总是绿色风格。所以简单地说：#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

试试

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

Answer 3

使用迭代器的 $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;
}

有条件地使用 ng-repeat 应用 css？

Conditionally apply css with ng-repeat?

angularjs

ng-repeat

ng-class

1、每一里都有自己的css风格，比如，第一里总是最大的字体，最后一里总是最小的字体。

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