使用ng-repeat对Angularjs表进行排序

Question

我有一个HTML表,想要$scope.records通过单击表头($scope.headers在ctrl中)对我的记录(在ctrl中)进行排序,

任何人都可以解释为什么这样做:

<th>
    <a ng-click="sortColumn=headers[0];reverse=!reverse">{{ headers[0] }}</a>
</th>
<th>
    <a ng-click="sortColumn=headers[1];reverse=!reverse">{{ headers[1] }}</a>
</th>

那不是:

<th ng-repeat="header in headers">
    <a ng-click="sortColumn=headers[$index];reverse=!reverse">{{ headers[$index] }}</a>
</th>

以下是记录的代码:

<tr ng-repeat="arr in records | orderBy:sortColumn:reverse">
    <td ng-repeat="val in arr" ng-bind-html-unsafe="arr[headers[$index]]</td>
</tr>

我的表中有58列,所以循环表头更好...

Answer 1

正如大卫所说,这可能与范围有关.由于ngRepeat创建了一个新的作用域,因此您ngClick需要为每个列标题设置sortColumn和reverse使用它自己的子作用域.

解决此问题的一种方法是确保修改相同作用域中的值,即在作用域上创建一个函数,并在索引中调用ngClick中的函数:

$scope.toggleSort = function(index) {
    if($scope.sortColumn === $scope.headers[index]){
        $scope.reverse = !$scope.reverse;
    }                    
    $scope.sortColumn = $scope.headers[index];
}

以此作为您的标记:

<th ng-repeat="header in headers">
    <a ng-click="toggleSort($index)">{{ headers[$index] }}</a>
</th>

这是一个例子的小提琴.

另一种选择是绑定到这样的非基本类型(子范围将访问同一个对象):

$scope.columnSort = { sortColumn: 'col1', reverse: false };

以此作为您的标记:

<th ng-repeat="header in headers">
    <a ng-click="columnSort.sortColumn=headers[$index];columnSort.reverse=!columnSort.reverse">{{ headers[$index] }}</a>
</th>

这是一个例子的小提琴.