ng-repeat中序列号的$ index的替代方法

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ng-repeat中序列号的$ index的替代方法相关的知识,希望对你有一定的参考价值。

我想显示使用ng-repeat填充的表数据的序列号。我所拥有的代码是这样的

<tr ng-repeat="usageRecord in applicationUsageDataForReport">
  <td style="text-align: center"><span>{{$index+1}}</span></td>
  <td style="padding-left: 5px; max-width: 200px; text-align: center; width:100px;">
    <span>{{usageRecord.ibu}}</span>
  </td>
</tr>

这工作正常。序列号按预期进行。但是当我使用ng-repeatng-if中添加条件时,$index值仅用于满足条件的那些记录,这些条件使序列号按非连续顺序排列。我可以使用的替代方案是什么,以便我能以正确的顺序获得序列号(1,2,3 ..)

答案

我创建了一个plnkr,它显示了如何使用ng-repeat过滤器方法。 demo

html

<tr ng-repeat="usageRecord in applicationUsageDataForReport | filter:filterFunction">
  <td style="text-align: center"><span>{{$index+1}}</span></td>
  <td style="padding-left: 5px; max-width: 200px; text-align: center; width:100px;"><span>{{usageRecord.ibu}}</span></td>
</tr>

JS:

$scope.filterFunction = function(item){
    /* return true if included false if excluded */
    return true;
};

以上是关于ng-repeat中序列号的$ index的替代方法的主要内容,如果未能解决你的问题,请参考以下文章

在 angularjs 中使用 ng-repeat 时扩展 $index 的范围

使用 ng-repeat 和过滤器时数组中对象的 $index

ng-repeat嵌套的$index

为啥 ng-click 需要通过 $index 跟踪才能在嵌套的 ng-repeat 内触发

ng-repeat 之 track by $index

请小心使用 ng-repeat 中的 $index