Angular ng-repeat，但repeat中的指令不同

Question

我想在angular中使用ng-repeat来重复一堆内部带有指令的<li>。但是，我希望ng-repeat中的前两个项目具有不同于其他项目的样式和html更改。我正在考虑使用ng-class来接收一个函数，该函数根据ng-repeat的$index设置特定的类，以解决问题的css部分。但是，对于html更改，我所能想到的就是对重复指令中的部分使用ng-shows/ng-hides，这些部分是基于$index等于0或1而设置的。

我想知道有没有更好的方法？

我希望ng-repeat的前两个项目始终存在，并且具有不同的样式(彼此和列表中的其他项目)，并且它们必须使用ng-repeat (因为动画目标)。

<ul class="wrapper">
     <li ng-class="conTroller.function(item.id)" id="Example2{{$index}}" ng-repeat="item in conTroller.list track by $index">
          <directive id="Example{{$index}}"></directive>
     </li>
</ul>

代码是调用ng-repeat的超文本标记语言(带有伪名)。正在使用Typescript。代码只是为了帮助而展示，我最需要的是概念本身的帮助。

Answer 1

您可以根据在应用指令的DOM元素上设置的属性来完全更改HTML模板。

在指令({})对象中，将templateUrl设置为一个函数，并返回用于读取元素属性值的模板的字符串。

更多信息：https://docs.angularjs.org/api/ng/service/$compile#-templateurl-

希望这能帮上忙

谢谢，沙恩