Question

我有一个通过ng-repeat生成的列表。例如，我有像这样的HTML

<ul class="my-list">
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>

我想使用angular添加一类.last-itmes到最后3个列表项。我怎么能这样做？

Answer 1

在ng-repeat中，Angular提供$index，$first，$last来获取列表项的索引位置。

在您的情况下，您可以使用$last并将其作为$last-1，$last-2的减法。

示例代码：

    <li ng-repeat="item in itemList"
       ng-class="{'last':($index === $last) || ($index === ($last-1)) ||  ($index === ($last-2))}"
     >List Item
  </li>

Answer 2

请参阅下面的演示

即：

ng-class="{'last-itmes':$index>=data.length-3}"

＆＃13;

var app = angular.module('app', []);

app.controller('homeCtrl', function($scope) {


  $scope.data = [1, 2, 3, 4, 5, 6, 7, 8, 9]

});

＆＃13;

.last-itmes {
  color: red
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="homeCtrl">
    <ul class="my-list">
      <li ng-repeat="i in data" ng-class="{'last-itmes':$index>=data.length-3}">{{i}}</li>

    </ul>

  </div>
</div>

＆＃13;

Answer 3

我的建议是你可以选择指令，这是一种干净利落的方式

var app = angular.module('myApp', []);
app.controller('ArrayController', function ($scope) {
    $scope.datas = ['List Item', 
                    'List Item', 
                    'List Item', 
                    'List Item', 
                    'List Item', 
                    'List Item', 
                    'List Item', 
                    'List Item'];
})

.directive("itemWatch", [function () {
    return {
        scope: {
            index: '=index',
            length: '=length'
        },
        replace: false,
        link: function ($scope, $element, $attrs, Controller) {
            if ($scope.length - $scope.index <= 3) {
                $element.addClass('last-itmes');
            }
        }
    };
}]);

.last-itmes
{
  color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='myApp' ng-controller="ArrayController">
    <ul class="my-list">
        <li ng-repeat="item in datas track by $index" index="$index" length="datas.length" item-watch>{{item}}</li>
    </ul>
</div>

Answer 4

您可以使用js object和ng-show。

var items = [
  {id:1,isLast:false}
  {id:2,isLast:true}
  {id:3,isLast:true}
]

你的html with angularjs：

<li ng-repeat="item in items">
  <div class="last-items" ng-show="item.isLast">
</li>

Answer 5

设置ng-repeat时，您可以使用track by $index确定您所在的位置。这样做，你可以轻松地在重复内做。要让它为最后三个项添加一个类，你可以在ng-class指令上添加一个条件，如下所示：

<table>
  <tbody ng-repeat="row in people track by $index">
    <tr ng-class="{'blue': $index > people.length - 4 }">
      <td>
        <p style="font-weight:bold;">{{ row }}</p>
      </td>
    </tr>
  <tbody>
</table>

我做了一个以示例为例： http://plnkr.co/edit/g24eYggfIRFS2El8R5Mu

在AngularJS中添加一个类到最后3个列表项

5 个答案: