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

152

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

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

但是，仅对于最后一个元素，我希望包含一个类（<div class="last">test</div>）。如何使用ng-repeat实现此目的？

angularjs

— 拉胡尔
source

从最近2小时开始就一直停留在同一时间：）

— Anshul 2015年

241

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

您可以这样做：

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

where computeCssClass的函数的controller唯一参数为参数，然后返回'last'或null。

要么

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

— 保罗·布里特
source

1

我早些时候看过，但无法弄清楚如何正确使用$ last ..也没有太多示例。

— 拉胡尔2013年

@Rahul，我已经更新了答案。你明白我在说什么吗？

— Paul Brit

8

是的..我也从Google <div ng-repeat="file in files" ng-class="{last: $last}"> {{file.name}} </div>

— 网上论坛

1

@Rahul，我想你的答案比我的要好。

— Paul Brit

@Rahul，确实很可悲，它对我有用。您在开发人员控制台中拥有什么？

— Paul Brit

23

使用CSS可以更轻松，更清洁地完成此任务。

HTML：

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

CSS：

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

该:last-of-type选择器目前受98％的浏览器支持

— 艾丹
source

3

AngularJS的CSS方式解决方案👌–

— Mo.

1

注意：当ng-repeat后面紧跟时，此功能不起作用<div class="file"></div>，您想分开现有.file div 的列表。

— DerMike

1

@DerMike在这种情况下，您需要在ng-repeat元素上添加其他类以将它们与结尾部分区分开来div

— aidan

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

— 斯科特剑
source

注意：如果将.ng-hide类应用于最后一个元素，则仅CSS解决方案不起作用，因为：last-child并不关心该元素是否在屏幕上呈现，而是实际上是否是最后一个元素标记中设置的元素。 fiddle.jshell.net/p5qe82w4/4

— 凯里·约翰逊

7

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

这对我行得通！祝好运！

— 法比安·佩雷斯（Fabian Perez）
source

因此，如果不是$ last，它具有一个for-last的类，而last元素具有其他类...

— strwoc

2

您可以使用limitTofilter与-1查找最后一个元素

范例：

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

— Nourein
source

0

Fabian Perez给出的答案对我有用，但有所变化

编辑的html在这里：

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

— 奈克
source