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

Question

问题：
我有一个指令，它有一个列表<ul>和动态生成的列表项<li>。我想更改其中一个<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（这是jqLit​​e）。我可以在指令的<ul>内angular.element.find('li')或element.children()访问link，但我似乎无法进入＆＃34;进一步向下＆＃34 ;比那，因为它们是动态创建的（我猜）。

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

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

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

Here's a working plunker

Answer 1

可以使用$index

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