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

I am creating a list using ng-repeat something like this

我使用ng-repeat来创建一个列表

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

But for the last element alone I would like to have a class (<div class="last">test</div>) included to it. how can i achieve this using ng-repeat?

但是对于最后一个元素，我希望包含一个类(

测试

)。我如何使用ng-repeat实现这个目标?

6 个解决方案

#1

217

You can use $last variable within ng-repeat directive. Take a look at doc.

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

You can do it like this:

你可以这样做:

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

Where computeCssClass is function of controller which takes sole argument and returns 'last' or null.

其中compussclass是控制器的函数，它只接受参数并返回'last'或null。

或

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

#2

It's easier and cleaner to do it with CSS.

使用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

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

#3

To elaborate on Paul's answer, this is the controller logic that coincides with the template code.

要详细说明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;
};

Its also worth noting that you really should avoid this solution if possible. By nature CSS can handle this, making a JS-based solution is unnecessary and non-performant. Unfortunately if you need to support IE8> this solution won't work for you (see MDN support docs).

同样值得注意的是，如果可能的话，您确实应该避免这种解决方案。从本质上讲，CSS可以处理这个问题，因此不需要基于jms的解决方案，也没有性能。不幸的是，如果您需要支持IE8>，那么这个解决方案对您将不起作用(参见MDN支持文档)。

CSS-Only Solution

CSS-Only解决方案

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

#4

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

That works for me! Good luck!

那适合我!好运！

#5

The answer given by F* Perez worked for me, with a little change

费边·佩雷斯给出的答案对我起了作用，只是有点变化

Edited html is here:

在这里编辑html:

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

#6

You could use limitTo filter with -1 for find the last element

您可以使用-1的限制来查找最后一个元素。

Example :

例子:

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

#1

217