Question

我正在使用一些AngularJS ng-repeat循环，但是我想生成一个网格的标记，但是需要在网格中的第四个项目中添加一个“grid-last”类，这是否可以实现？

我的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="{}"

Answer 1

角度重复范围提供$index属性;因此，你可以data-ng-class="{'grid--last': $index == 3}"假设你的意思是第4项是3，因为指数从0开始。

Answer 2

您可以使用CSS执行此操作，但IE8及更低版本可能存在浏览器兼容性问题（令人震惊）

plnk here

相关代码：

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

AngularJS在ng-repeat中添加条件类

2 个答案: