Question

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

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

但是对于最后一个元素，我希望包含一个类（<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：

function countDown() {
    self.seconds--; //Changed Line
    if (self.minutes == 0 && self.seconds == 0) {
      self.stop();
    }

    if (self.seconds < 0) { //Changed Condition. Not include 0
      self.seconds = 59;
      self.minutes--;
    }

    if (self.seconds <= 9) { self.seconds = '0' + self.seconds; }

    self.element.textContent = self.minutes + ' : ' + self.seconds;
  }

CSS：

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

The :last-of-type selector is currently supported by 98% of browsers

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＆gt;这个解决方案不适合你（see MDN support docs）。

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

这对我有用！祝你好运！

Answer 5

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

示例：

<div ng-repeat="friend in friends | limitTo: -1">
    {{friend.name}}
</div>

Answer 6

Fabian Perez给出的答案为我工作，稍作改动

编辑的html在这里：

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

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

6 个答案: