Angular将样式应用于ngRepeat中的第一个可见项

Question

我有一个由ngRepeat生成的列表,就像这样

<ul class="list-group">
    <li class="list-group-item" ng-repeat="data in tree | filter:key">
        {{data.name}}
    </li>
</ul>

我希望列表中的第一项具有圆角.我有一种风格,如

.first-item {
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}

如何将此样式应用于第一个可见项？请注意,key它连接到搜索框,因此第一个项目是动态的.

Answer 1

使用$ first,表示ng-repeat中的第一次迭代

<ul class="list-group">
    <li ng-class="{'first-item':$first}"
class="list-group-item" ng-repeat="data in tree | filter:key">
        {{data.name}}
    </li>
</ul>      

编辑:因为first-item有一个破折号,它必须在引号中