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

Question

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

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

并且我希望列表中的第一项具有圆 Angular 。我有这样的风格

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

如何将此样式应用于第一个可见 项？请注意，键 连接到搜索框，因此第一项是动态的。

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 有破折号，所以它必须用引号引起来