AngularJS在ng-repeat中添加了条件类

AngularJS add conditional class in ng-repeat

本文关键字：条件 添加 ng-repeat AngularJS      更新时间：2023-09-26

我正在使用一些AngularJS ng-repeat循环，但我想生成一个网格的标记，但需要添加一个'grid- last'类到网格中的第4项，这是可以实现的吗?

我的HTML: 

<div ng-repeat="service in services" class="grid__4">
                <div class="services__box">
                    <img src="img/services/{{service.thumb}}.jpg" alt="" class="services__box__img">
                    <h1 class="services__box--alpha alpha">{{service.title}}</h1>
                    <p>
                        {{service.text}}
                    </p>
                    <a href="{{service.url}}.php" class="services__box--btn btn btn--blue">{{service.button}}</a>
                </div>
            </div>

理想情况下，我需要获得数组的索引并使用ng-class。有人能告诉我怎么做吗?谢谢!

ng-class="{}"

Angular repeat作用域提供了一个$index属性;因此，您可以执行data-ng-class="{'grid--last': $index == 3}"，假设您的意思是第4项是3，因为索引从0开始。

你可以用CSS来做到这一点，但可能会有IE8和更低版本的浏览器兼容性问题(令人震惊)

plnk这里相关代码:

<style>
      li.item {
        background-color:blue;
      }
      li.item:last-child {
       background-color: red;
      }
    </style>
  </head>
  <body ng-controller="testCtl">
    <ul>
      <li class="item" ng-repeat="val in [1, 2, 3, 4]">{{val}}</li>
    </ul>
  </body>
相关文章：