angularjsangularjs-ng-repeatangularjs-ng-init

how to set $Index to 1 every ng-repeat call


 <table class="table table-bordered">
      <tr ng-repeat="x in AppliedJob">
    <td>{{x.JobName}}</td>
 <td>  <span class="dropdown" ng-repeat="y in AppliedCenter|  unique: 'Location' " ng-if="y.JobName==x.JobName">
 {{$index+1}}){{y.Location}}                      
 </span> </td></tr> </table>

Output of above code

1) Tester    :  1)India 2)USA 3)Australia
2) Developer :  4)Japan 5)China

Required Output

1) Tester    :  1)India 2)USA 3)Australia
2) Developer :  1)Japan 2)China

I want to set $Index to 1.


Solution

  • It happens because you're filtering using ng-if which is not affect array and it's indexes, it just removes the element from DOM. You should use filter instead of y.JobName==x.JobName comparison in ng-if so yours ng-repeat expression should be like this y in AppliedCenter | unique: 'Location' | filter: { JobName: x.JobName }. See example:

    angular
    .module('Test', [])
    .controller('TestController', ['$scope', function($scope) {
      $scope.cities = ["New York", "LA"];
      $scope.jobs = [{ name: "QA", city: "New York"}, { name: "Frontend", city: "New York"}, {name: "Backend", city: "New York"}, {name: "DBA", city: "LA"}, { name: "QA", city: "LA"}];
      }]);
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
    <div ng-app="Test">
      <div ng-controller="TestController">
        <table>
          <tr ng-repeat="city in cities">
            <td ng-bind="city"></td>
            <td>
              <span ng-repeat="job in jobs | filter:{city: city}">{{($index + 1) + ")" + job.name}} </span>
            </td>
          </tr>
         </table>
      </div>
    </div>