Ng- 重复中最后一个元素的不同类

我正在创建一个名单使用 n- 重复这样的东西

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

但是对于最后一个元素，我希望它包含一个类(<div class="last">test</div>)。我怎样才能做到这一点使用 n- 重复？

121227 次浏览
小开
最佳答案

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

你可以这样做:

 <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>
小开

为了详细说明 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 */ }
小开 
<div ng-repeat="file in files" ng-class="!$last ? 'class-for-last' : 'other'">
\{\{file.name}}
</div>

我没问题，祝你好运！

小开

使用 CSS 做起来更简单、更干净。

HTML:

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

CSS:

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

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

小开

法比安 · 佩雷斯给出的答案对我有效，只是有一点点变化

编辑的 html 在这里:

< div ng-repeat = “ file in files”ng-class = “ ! $last? ‘ other’: ‘ class-for-last’”> \{\{ file.name }}

小开

可以将 limitTo过滤器与 -1一起用于查找最后一个元素

例子 :

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

提交答案