AngularJS表排序与ng-repeat

一尘不染

AngularJS表排序与ng-repeat

angularjs

我有一个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列，因此遍历表格标题会更好。

阅读 203

2020-07-04

共1个答案

一尘不染

正如David所建议的，这可能与范围有关。由于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>

这是一个例子。

2020-07-04