Javascript Angularjs表排序与ng重复

我有一个HTML表格，希望通过单击表格标题（

$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>

{{headers[0]}
{{headers[1]}

但事实并非如此：

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

{{headers[$index]}

以下是记录的代码：

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

正如David所说，这可能与范围有关。由于创建了一个新范围，因此您的
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>

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

将此作为标记：

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

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


举个例子。
扩展Gloopy的答案，另一个选项是修改原始类型的ng repeat中的父属性：

<a ng-click="$parent.sortColumn=headers[$index];$parent.reverse=!$parent.reverse">{{ headers[$index] }}


但是请注意，$parent不是的一个有文档记录的属性，因此这有点像黑客攻击，所以使用它的风险由您自己承担

我希望AngularJS有更好的方法来处理这些由ng repeat、ng switch等创建的“内部作用域”，因为我们经常需要修改作为原语的父作用域属性

另请参阅Gloopy关于范围继承的深刻评论，因为它涉及到原语和非原语。
我不知道您的记录中有什么类型的数据，所以对于我的示例，我只使用了一个JSON值数组。我用Angular为我的Javascript尝试了几个不同的排序插件，但都没有效果。从长远来看，我发现你不一定需要那些额外的东西

由于AngularJS擅长处理javascript数据结构以在HTML中显示，因此您只需重新排列内存中的javascript数组，AngularJS就可以了解这些更改此示例允许单击表的标题，这将触发基于该列数据类型的排序。如果已经对该列进行了排序，它将对该列进行反向排序。类型检测是通过提供的isNumeric（）函数完成的，还有两个微小的调整：

添加了检查是否将“#”符号作为标题输入，并在toggleSort方法中作为数字排序。如果用户愿意，可以很容易地将其删除
当toggleSort尝试按字母顺序排序时，如果它捕获到一个类型错误，则会切换到按数字排序

var-app=angular.module（“app”，[]）；
应用控制器（“主控制器”，功能（$scope）{
$scope.samplePositions=[
{“#”：“1”，“唯一ID”：“100130”，“名称”：“书籍”，“章节”：“巴拉圭”，“位置”：“货架1-货架1-箱子1-位置1”，“状态”：“可用”}，
{“#”：“2”，“唯一ID”：“100131”，“名称”：“书籍”，“章节”：“巴拉圭”，“位置”：“货架1-货架1-箱子1-位置2”，“状态”：“可用”}，
{“#”：“3”，“唯一ID”：“100132”，“名称”：“书籍”，“章节”：“巴拉圭”，“位置”：“货架1-货架1-箱子1-位置3”，“状态”：“可用”}，
{“#”：“4”，“唯一ID”：“100133”，“名称”：“书籍”，“章节”：“巴拉圭”，“位置”：“货架1-货架1-箱子1-位置4”，“状态”：“可用”}，
{“#”：“5”，“唯一ID”：“100134”，“名称”：“书籍”，“章节”：“巴拉圭”，“位置”：“货架1-货架1-箱子1-位置5”，“状态”：“已结账”}，
{“#”：“6”，“唯一ID”：“100135”，“名称”：“书籍”，“章节”：“巴拉圭”，“位置”：“货架1-货架1-箱子1-位置6”，“状态”：“已结账”}，
{“#”：“7”，“唯一ID”：“100136”，“名称”：“书籍”，“章节”：“巴拉圭”，“位置”：“货架1-货架1-箱子1-位置7”，“状态”：“已结账”}，
{“#”：“8”，“唯一ID”：“100137”，“名称”：“书籍”，“章节”：“巴拉圭”，“位置”：“货架1-货架1-箱子1-位置8”，“状态”：“已结账”}，
{“#”：“9”，“唯一ID”：“100138”，“名称”：“书籍”，“章节”：“巴拉圭”，“位置”：“货架1-货架1-箱子1-位置1”，“状态”：“可用”}，
{“#”：“10”，“唯一ID”：“100139”，“名称”：“书籍”，“章节”：“巴拉圭”，“位置”：“货架1-货架2-箱子1-位置1”，“状态”：“可用”}，
{“#”：“11”，“唯一ID”：“100140”，“名称”：“书籍”，“章节”：“巴拉圭”，“位置”：“货架1-货架2-箱子1-位置2”，“状态”：“可用”}，
{“#”：“12”，“唯一ID”：“100141”，“名称”：“书籍”，“章节”：“巴拉圭”，“位置”：“货架1-货架2-箱子1-位置3”，“状态”：“丢失”}，
{“#”：“13”，“唯一ID”：“100142”，“名称”：“书籍”，“章节”：“巴拉圭”，“位置”：“货架1-货架2-箱子1-位置4”，“状态”：“丢失”}，
{“#”：“14”，“唯一ID”：“100143”，“名称”：“书籍”，“章节”：“巴拉圭”，“位置”：“货架1-货架3-箱子1-位置1”，“状态”：“可用”}，
{“#”：“15”，“唯一ID”：“100144”，“名称”：“书籍”，“章节”：“巴拉圭”，“位置”：“货架1-货架3-箱子1-位置2”，“状态”：“可用”}，
{“#”：“16”，“唯一ID”：“100145”，“名称”：“书籍”，“章节”：“巴拉圭”，“位置”：“货架1-货架4-箱子1-位置1”，“状态”：“已结账”}，
{“#”：“17”，“唯一ID”：“100146”，“名称”：“书籍”，“章节”：“巴拉圭”，“位置”：“货架1-货架4-箱子1-位置2”，“状态”：“可用”}，
{“#”：“18”，“唯一ID”：“100147”，“名称”：“书籍”，“章节”：“巴拉圭”，“位置”：“货架1-货架4-箱子1-位置3”，“状态”：“可用”}，
{“#”：“19”，“唯一ID”：“100148”，“名称”：“书籍”，“章节”：“巴拉圭”，“位置”：“货架1-货架4-箱子1-位置4”，“状态”：“已结账”}，
{“#”：“20”，“唯一ID”：“100149”，“名称”：“书籍”，“章节”：“巴拉圭”，“位置”：“货架1-货架5-箱子1-位置1”，“状态”：“可用”}
]
//通过头键查找动态获取用于显示嵌套数据的条目头
//假设所有行包含相同的键文本数据
$scope.samplePositionsHeaderKeys=[]；//只包含key-d