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