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

我正在使用ng创build一个列表 – 重复这样的事情

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

但是对于最后一个元素，我想要一个包含它的类（ <div class="last">test</div> ）。 我怎样才能达到这个使用ng-repeat？

Answer 1

你可以在ng-repeat指令中使用$lastvariables。 看看文档 。

你可以这样做：

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

98％的浏览器目前支持:last-of-typeselect器

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

还值得注意的是，如果可能的话，你真的应该避免这个解决scheme。 本质上CSS可以处理这个问题，使得一个基于JS的解决scheme是不必要的和非高性能的。 不幸的是，如果你需要支持IE8>这个解决scheme不适合你（ 请参阅MDN支持文档 ）。

纯CSS解决scheme

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

这对我行得通！ 祝你好运！

Answer 5

Fabian Perez给出的答案对我来说有一点改变

编辑的html在这里：

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