上一篇: javascript – EmberJS：如何在选... 下一篇:haskell – 使用Aeson嵌套JSON中...

javascript – Angularjs表排序与ng重复

JavaScript 发布时间：2022-04-16 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了javascript – Angularjs表排序与ng重复，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我有一个 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为例.