angularjs中使用ng-repeat渲染最后一个li的时候设置不同样式

2016.5.6 - 南京

如题所示，比如我要在下面的代码的最后一个li节点添加一个样式

<li ng-repeat="item in items">
  {{item.name}}
</li>

那么我就可以这样加，多个判断用逗号分隔

<li ng-repeat="item in items"
    ng-class="{'item-last':$last}">
  {{item.name}}
</li>

还有一种方法就是使用js计算的方法

<li ng-repeat="item in items"
    ng-class="isLast($last)">
  {{item.name}}
</li>

Controller中的代码定义是这样

$scope.isLast = function(flag) {
  return flag ? 'item-last'
              : 'item-not-last';
};

CSS定义是这样

.item-last { /* snippet */ }
.item-not-last { /* snippet */ }

对，这就是一个三元运算，你可以直接在html里面用，像这样

<li ng-repeat="item in items"
    ng-class="$last ? 'item-last'
                    : 'item-not-last'">
  {{item.name}}
</li>

ngRepeat还有以下几种类型：

Variable	Type	Details
$index	number	iterator offset of the repeated element (0..length-1)
$first	boolean	true if the repeated element is first in the iterator.
$middle	boolean	true if the repeated element is between the first and last in the iterator.
$last	boolean	true if the repeated element is last in the iterator.
$even	boolean	true if the iterator position $index is even (otherwise false).
$odd	boolean	true if the iterator position $index is odd (otherwise false).

参考文章：

相关阅读