如何在不改變ng-repeat的$ index的情況下使用ng-filter？

Question

目前如果我篩選，$ index也會更新。所以如果有500個結果，我篩選排名，也會更新。我如何擁有一個不更新的索引列？

這裏是我的代碼：

<input ng-model="query.teamName" /></div> 
<table class="table"> 
    <thead> 
    <tr> 
     <th>Rank</th> 
     <th>Team</th> 
     <th>Location</th> 
     <th>Score</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr ng-repeat="team in teams | filter:query | orderBy:orderByScore:reverseSort"> 
     <td><span style="color:white">{{$index+1}}</span></td> 
     <td>{{team.teamName}}</td> 
     <td>{{team.teamLocation}}</td> 
     <td>{{team.teamPoints | number:2}}</td> 
    </tr> 
    </tbody> 
</table> 

控制器：

scoreboard.controller('scoreboardCtrl', function ($scope, $filter) { 

    $scope.orderByScore = 'teamPoints'; 
    $scope.reverseSort = true; 

    $scope.teams = [ 
      { "teamName": "motorboat skydive", "teamLocation": "1189 King", "teamPoints": 35.53}, 
      { "teamName": "the grinders", "teamLocation": "1189 King", "teamPoints": 127.90}, 
      { "teamName": "team forrec", "teamLocation": "1189 King", "teamPoints": 29.46}, 
      { "teamName": "bikini finger", "teamLocation": "1189 King", "teamPoints": 21.98}, 
      { "teamName": "la familia", "teamLocation": "1189 King", "teamPoints": 148.32}, 
      { "teamName": "darkness is", "teamLocation": "1189 King", "teamPoints": 108.88}, 
      { "teamName": "grinders", "teamLocation": "1189 King", "teamPoints": 167.95}, 
      { "teamName": "discarded youth", "teamLocation": "1189 King", "teamPoints": 55.52} 
      ]; 
    }; 

Answer 1

角過濾去除，並增加了一個新的數組，並更新NG重複，所以$index也將被更新。相反，您可以初始化索引ng-init="idx=$index+1"並使用它。 ng-init值從來沒有看過，並沒有更新爲好，但$index將在陣列中更改基於該項目的迭代次數

<tr ng-repeat="team in teams | filter:query | orderBy:orderByScore:reverseSort" ng-init="idx = $index+1"> 
    <td><span>{{idx}}</span></td> 

Plnkr

由於指數是在你的情況下，這裏的關鍵這是排名最好的方式來處理這可能是從控制器本身添加索引。

$scope.teams = [ 
      { "teamName": "motorboat skydive", "teamLocation": "1189 King", "teamPoints": 35.53}, 
      { "teamName": "the grinders", "teamLocation": "1189 King", "teamPoints": 127.90}, 
      { "teamName": "team forrec", "teamLocation": "1189 King", "teamPoints": 29.46}, 
      { "teamName": "bikini finger", "teamLocation": "1189 King", "teamPoints": 21.98}, 
      { "teamName": "la familia", "teamLocation": "1189 King", "teamPoints": 148.32}, 
      { "teamName": "darkness is", "teamLocation": "1189 King", "teamPoints": 108.88}, 
      { "teamName": "grinders", "teamLocation": "1189 King", "teamPoints": 167.95}, 
      { "teamName": "discarded youth", "teamLocation": "1189 King", "teamPoints": 55.52} 
      ] 
    .sort(function(itm1, itm2){ return itm2.teamPoints - itm1.teamPoints }) //Sort teams 

    .map(function(itm, idx){ itm.index = (idx+1); return itm; }); //assign rankings 

我用天然排序或者只是使用角orderByFilter本身在控制器這樣做對的初始集合（和從視圖中刪除NG-INIT變量賦值的邏輯）。所以你不會運行時發生$ index問題。

Plnkr2