Css 将角度样式应用于ngRepeat中的第一个可见项

我有一个由ngRepeat生成的列表，如下所示

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

---

如何将此样式应用于第一个可见的项目？请注意，

键连接到搜索框，因此第一项是动态的。
您可以使用css规则第一个子项：

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

您可以使用css规则的第一个子项：

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

纯角度的方式是：

<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>



{{data.name}



或者参见Sasi Kiran的答案；）
 纯角度方式为：

<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>



{{data.name}



或者参见Sasi Kiran的答案；）
 使用$first，它表示ng重复中的第一次迭代



{{data.name}




编辑：由于
first item
有一个破折号，因此它必须在引号中使用$first，表示ng repeat中的第一次迭代



{{data.name}




编辑：由于
第一项
有一个破折号，它必须在引号中
您可以使用$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>



{{data.name}


您可以使用$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>



{{data.name}


使用$first和ng class$首先是一个属性，它在本地范围中公开，用于重复列表中的每个项。如果该项是重复列表中的第一项，则其值为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>



{{data.name}


使用$first和ng class$首先是一个属性，它在本地范围中公开，用于重复列表中的每个项。如果该项是重复列表中的第一项，则其值为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>



{{data.name}


使用CSS和
：第一个孩子
选择器可能更容易处理。@Stubb0rn你说得对！我本该想到的，但我想我的脑子有点问题。我还假设过滤器使用“display:none”工作。。。但事实并非如此。使用CSS和
：first child
选择器可能更容易处理。@Stubb0rn你说得对！我本该想到的，但我想我的脑子有点问题。我还假设过滤器使用“display:none”工作。。。但事实并非如此。这是唯一适合我的解决方案。使用
ng class=“{'first-item'：$first}”
对我不起作用，因为bootstrap已经有了一个选择器
。列表组项：first child
，这显然更具体。这是唯一对我起作用的解决方案。使用
ng class=“{'first-item'：$first}”
对我不起作用，因为引导程序已经有了一个选择器
。列出组项：第一个子项
，这显然更具体。@SasiKiran是的。它起作用了。谢谢但我也不得不改变我班上的边界！重要的与引导css中的另一个类存在冲突。这就是为什么我更喜欢巴斯蒂安的答案。@SasiKiran是的。它起作用了。谢谢但我也不得不改变我班上的边界！重要的与引导css中的另一个类存在冲突。这就是为什么我更喜欢巴斯蒂安的答案。