ng-repeat中最后一个元素的不同类

Question

我正在使用像这样的ng-repeat创建一个列表

  <div ng-repeat="file in files">
   {{file.name}}
   </div>

但是对于最后一个元素,我希望包含一个class(<div class="last">test</div>).我如何使用ng-repeat实现这一目标？

Answer 1

您可以$last在ng-repeat指令中使用变量.看一下doc.

你可以这样做:

 <div ng-repeat="file in files" ng-class="computeCssClass($last)">
 {{file.name}}
 </div>

computeCssClass函数在哪里controller采用唯一参数并返回'last'或null.

要么

  <div ng-repeat="file in files" ng-class="{'last':$last}">
  {{file.name}}
  </div>

Answer 2

使用CSS更容易,更清洁.

HTML:

<div ng-repeat="file in files" class="file">
  {{ file.name }}
</div>

CSS:

.file:last-of-type {
    color: #800;
}

该:last-of-type选择目前由浏览器98%的人支持

Answer 3

为了详细说明Paul的答案,这是与模板代码一致的控制器逻辑.

// HTML
<div class="row" ng-repeat="thing in things">
  <div class="well" ng-class="isLast($last)">
      <p>Data-driven {{thing.name}}</p>
  </div>
</div>

// CSS
.last { /* Desired Styles */}

// Controller
$scope.isLast = function(check) {
    var cssClass = check ? 'last' : null;
    return cssClass;
};

值得注意的是,如果可能的话,你真的应该避免这种解决方案.从本质上讲,CSS可以处理这个问题,因此基于JS的解决方案是不必要且不具备性能的.不幸的是,如果您需要支持IE8>此解决方案不适合您(请参阅MDN支持文档).

仅CSS解决方案

// Using the above example syntax
.row:last-of-type { /* Desired Style */ }

Answer 4

<div ng-repeat="file in files" ng-class="!$last ? 'class-for-last' : 'other'">
   {{file.name}}
</div>

这对我行得通!祝好运!