AngularJS - 在指令中选择动态 ng-repeat DOM 元素

Question

问题：
我有一个指令，它有一个列表<ul>和动态生成的列表项<li> s。我想更改这些<li>项目之一的 css。

下面是指令的 template 属性的代码：

<ul>
    <li ng-repeat="color in colors" ng-class="{selected: (color===selected) }" ng-click="pick(color)" style="background-color:{{color}};"></li>
</ul>

我想更改第三个元素的css，即$first + 2，但我不知道如何访问它。

我尝试
过什么1）由于我希望该指令在没有jQuery的情况下工作，我一直在尝试使用angular.element（即jqLite）。我可以通过angular.element.find('li')或只是在指令link内element.children()来访问<ul>，但我似乎不能比这"更深入"，因为它们是动态创建的（我猜）。

2）我一直在尝试通过$first+2访问它，并在ng-repeat中添加一个css类，如下所示：

<ul>
    <li ... ng-class="{ ... , cssClass: ($first+2) }" ...></li>
</ul>

但随后所有<li>元素都会受到影响。

这是一个工作弹道

Answer 1

可以使用$index

<li ng-class="{ cssClass: $index == 2 }"></li>