159

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

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

但仅对于最后一个元素，我希望在其中包含一个类 ( <div class="last">test</div>)。我如何使用 ng-repeat 来实现这一点？

4

6 回答 6

250

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

你可以这样做：

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

wherecomputeCssClass函数controller接受唯一参数并返回'last'or null。

或者

  <div ng-repeat="file in files" ng-class="{'last':$last}">
  {{file.name}}
  </div>
于 2013-01-29T11:24:27.597 回答
23

使用 CSS 更容易和更清洁。

HTML：

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

CSS：

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

目前:last-of-type98% 的浏览器都支持选择器

于 2015-09-17T04:51:12.537 回答
14

详细说明 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 */ }
于 2014-09-18T14:08:13.047 回答
7 
<div ng-repeat="file in files" ng-class="!$last ? 'class-for-last' : 'other'">
   {{file.name}}
</div>

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

于 2015-06-18T18:50:45.300 回答
2

您可以使用limitTo过滤器-1来查找最后一个元素

示例：

<div ng-repeat="friend in friends | limitTo: -1">
    {{friend.name}}
</div>
于 2018-04-10T20:33:27.687 回答
0

Fabian Perez 给出的答案对我有用，但有一点改变

编辑后的 ​​html 在这里：

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

于 2017-05-29T03:36:54.803 回答