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

【问题标题】：Different class for the last element in ng-repeatng-repeat 中最后一个元素的不同类
【发布时间】：2013-01-12 22:47:44
【问题描述】：

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

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

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

【问题讨论】：

在过去 2 小时内一直卡在同一位置 :)

标签： angularjs

【解决方案1】：

您可以在ng-repeat 指令中使用$last 变量。看看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>

【讨论】：

我之前看过，但不知道如何准确地使用 $last.. 那里也没有太多例子。
@Rahul，我已经更新了答案。你明白我在说什么吗？
是的。我还从谷歌群组<div ng-repeat="file in files" ng-class="{last: $last}"> {{file.name}} </div>得到另一个答案
@Rahul，我猜，你的回答比我的好。
@Rahul，确实很遗憾，它对我有用。您在开发者控制台中有什么？

【解决方案2】：

细说一下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> 这个解决方案将不适合您 (see MDN support docs)。

纯 CSS 解决方案

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

【讨论】：

注意：如果 .ng-hide 类应用于最后一个元素，则纯 CSS 解决方案不起作用，因为 :last-child 不关心元素是否在屏幕上呈现，但它是否是标记中集合中的最后一个元素。 fiddle.jshell.net/p5qe82w4/4

【解决方案3】：

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

这对我有用！祝你好运！

【讨论】：

所以如果不是$last，它有一个class-for-last，最后一个元素有class other...

【解决方案4】：

使用 CSS 更容易、更简洁。

HTML：

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

CSS：

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

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

【讨论】：

以 CSS 方式解决 AngularJS 的问题 ?
注意：当ng-repeat 后跟<div class="file"></div> 时，这不起作用，并且您想分开现有 .file div 的列表。
@DerMike 在这种情况下，您将在 ng-repeat 元素上放置另一个类，以将它们与尾随的 div 区分开来

【解决方案5】：

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

编辑的 html 在这里：

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

【讨论】：

【解决方案6】：

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

示例：

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

【讨论】：