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有短划线，因此必须使用引号

Answer 2

您可以使用css规则first-child：

.list-group li:first-child { 
     border-top-left-radius: 15px;
     border-top-right-radius: 15px;
}

http://www.w3schools.com/cssref/sel_firstchild.asp

Answer 3

Pure Angular Way将是：

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

或看到Sasi Kiran的答案;）

Answer 4

您可以使用$ index变量值在ng-repeat中执行此类条件格式设置。这是一个例子：

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

Answer 5

使用$ first和ng-class。 $ first是对于重复列表中的每个项目，在本地范围上公开的属性。如果项目是重复列表中的第一个，则值为true。 HTML应如下所示：

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

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

5 个答案: