How to use ng filter without changing $ index to ng-repeat?

Currently, if I filter, the index $ index is also updated. Therefore, if there are 500 results, and I filter the rating, as well as updates. How do I have an index column that is not updating?

Here is my code:

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

Controller:

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}
          ];
     };
+4
source share
1 answer

Angular ng-repeat, $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

angular orderByFilter , ( ng-init ). , $index.

Plnkr2

+5

All Articles