排序表时如何更改对象的索引

Question

有人可以建议我如何使用角度过滤器按任何列名对表格进行排序，排序正常，但数组索引没有更新。

提前谢谢你

请找Pen

var app = angular.module('app', []);

app.controller('MainCtrl', function($scope,$rootScope) {
  $scope.orderByField = 'firstName';
  $scope.reverseSort = false;
 
  $rootScope.data = {
    employees: [{
      firstName: 'John',
      lastName: 'Doe',
      age: 30
    },{
      firstName: 'Frank',
      lastName: 'Burns',
      age: 54
    },{
      firstName: 'Sue',
      lastName: 'Banter',
      age: 21
    }]
  };
   $scope.func=function(i){
    console.log( $rootScope.data.employees[i]);
    debugger;
  }
});

section {
  width: 400px;
  margin: 10px auto;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<section ng-app="app" ng-controller="MainCtrl">
  <span class="label">Ordered By: {{orderByField}}, Reverse Sort: {{reverseSort}}</span><br><br>
  <table class="table table-bordered">
    <thead>
      <tr>
        
        <th>
          <a href="#" ng-click="orderByField='firstName'; reverseSort = !reverseSort">
          First Name <span ng-show="orderByField == 'firstName'"><span ng-show="!reverseSort">^</span><span ng-show="reverseSort">v</span></span>
          </a>
        </th>
        <th>
          <a href="#" ng-click="orderByField='lastName'; reverseSort = !reverseSort">
            Last Name <span ng-show="orderByField == 'lastName'"><span ng-show="!reverseSort">^</span><span ng-show="reverseSort">v</span></span>
          </a>
        </th>
        <th>
          <a href="#" ng-click="orderByField='age'; reverseSort = !reverseSort">
          Age <span ng-show="orderByField == 'age'"><span ng-show="!reverseSort" class="glyphicon glyphicon-triangle-top"></span><span class="	glyphicon glyphicon-triangle-bottom" ng-show="reverseSort"></span></span>
          </a>
        </th><th>Action</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="emp in data.employees|orderBy:orderByField:reverseSort">
        
        <td>{{emp.firstName}}</td>
        <td>{{emp.lastName}}</td>
        <td>{{emp.age}}</td>
        <td  ng-click="func($index)" ><span class="glyphicon glyphicon-pencil"></span>edit</td>
      </tr>
    </tbody>
  </table>
</section>

Answer 1

运行 codepen/sn-p 后，我可以看到单击编辑不会记录相应行的员工。

您必须将员工传递给您的处理程序而不是索引。

如果您确实需要索引，您可以使用 indexOf 获取索引，但使用索引只会让您获得对同一对象的引用，因此 employee $rootScope.data.employees[i] 的所有意图和目的都是相同的。

var app = angular.module('app', []);

app.controller('MainCtrl', function($scope,$rootScope) {
  $scope.orderByField = 'firstName';
  $scope.reverseSort = false;
 
  $rootScope.data = {
    employees: [{
      firstName: 'John',
      lastName: 'Doe',
      age: 30
    },{
      firstName: 'Frank',
      lastName: 'Burns',
      age: 54
    },{
      firstName: 'Sue',
      lastName: 'Banter',
      age: 21
    }]
  };
   $scope.func=function(employee){
    console.log(employee);
    
    // if you absolutley need the index then use indexOf
    var i = $rootScope.data.employees.indexOf(employee);
  }
});

section {
  width: 400px;
  margin: 10px auto;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<section ng-app="app" ng-controller="MainCtrl">
  <span class="label">Ordered By: {{orderByField}}, Reverse Sort: {{reverseSort}}</span><br><br>
  <table class="table table-bordered">
    <thead>
      <tr>
        
        <th>
          <a href="#" ng-click="orderByField='firstName'; reverseSort = !reverseSort">
          First Name <span ng-show="orderByField == 'firstName'"><span ng-show="!reverseSort">^</span><span ng-show="reverseSort">v</span></span>
          </a>
        </th>
        <th>
          <a href="#" ng-click="orderByField='lastName'; reverseSort = !reverseSort">
            Last Name <span ng-show="orderByField == 'lastName'"><span ng-show="!reverseSort">^</span><span ng-show="reverseSort">v</span></span>
          </a>
        </th>
        <th>
          <a href="#" ng-click="orderByField='age'; reverseSort = !reverseSort">
          Age <span ng-show="orderByField == 'age'"><span ng-show="!reverseSort" class="glyphicon glyphicon-triangle-top"></span><span class="	glyphicon glyphicon-triangle-bottom" ng-show="reverseSort"></span></span>
          </a>
        </th><th>Action</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="emp in data.employees|orderBy:orderByField:reverseSort">
        
        <td>{{emp.firstName}}</td>
        <td>{{emp.lastName}}</td>
        <td>{{emp.age}}</td>
        <td  ng-click="func(emp)" ><span class="glyphicon glyphicon-pencil"></span>edit</td>
      </tr>
    </tbody>
  </table>
</section>