我有一个
HTML表,想要通过点击表头(ctrl中的$scope.headers)来排序我的记录(ctrl中的$scope.records)
任何人都可以解释为什么这样做:
<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列,所以更好的循环通过表头…
解决方法
正如大卫所说,这可能与范围有关.由于
ngRepeat创建了一个新的范围,您的ngClick正在为每个列标题的子范围设置sortColumn和反向.
确保您修改相同范围内的值的一个方法是在范围上创建一个函数,并在您的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>
Here is a fiddle以一个例子.
另一个选择是绑定到这样的非原始类型(子范围将访问同一个对象):
$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>
以Here is a fiddle为例.