【问题标题】：Sorting columns in nested ng-repeat (AngularJS)在嵌套的 ng-repeat (AngularJS) 中对列进行排序
【发布时间】：2016-11-22 23:14:25
【问题描述】：

目前我无法使用orderBy-filter 对列表中的列进行排序。我遇到的问题是嵌套的 ngRepeat。

查看：

<md-list>
        <md-list-item>
            <span ng-repeat="item in ::hItems track by $index" ng-click="sortBy(item)" flex>
                {{ ::item }}
            </span>
        </md-list-item>
        <md-divider></md-divider>
        <md-list-item ng-repeat="cItem in ::cItems | orderBy:sortType:sortReverse track by $index">
            <span ng-repeat="(key, value) in ::cItem track by $index" flex>
                {{ ::value }}
            </span>
            <md-divider></md-divider>
        </md-list-item>
</md-list>

只要用户单击列标题，就会调用函数sortBy。该函数在控制器中实现如下：

//Default values:
$scope.sortType = 'NAME';
$scope.sortReverse = false;
var orderBy = $filter('orderBy');

//sortBy func:
function sortBy(columnKey) {
    $scope.sortType = columnKey;
    $scope.sortReverse = !$scope.sortReverse;
    $scope.cItems = orderBy($scope.cItems, $scope.sortType, $scope.sortReverse);
}

列表仅按默认值name 排序。这是 GET-request 的数组输出：

//JSON data
[
    {
        "ArtNo": "DE123",
        "SHORTCODE": "ABC",
        "NAME": "article one",
        "QUANTITY": 3,
        "GROUPID": 1,
        "ACTIVE": 1
    },...
]

所以，我需要嵌套的 ngRepeat，因为如何查看数组是用键号和对象值定义的 => [0:Object, 1:Object...]。我只需要我的sortBy-function 的解决方案。有人有想法吗？

以下是我的输出列表：

ArtNo | SHORTCODE | NAME          | QUANTITY
DE123 |   ABC001  | article one   | 3
DE456 |   ABC002  | article two   | 8
DE789 |   ABC003  | article three | 4
DE321 |   ABC004  | article four  | 13
....

【问题讨论】：

请简化您的问题代码并提供一个可行的小提琴...
@EliasSoares 你在我的代码中有什么不明白的地方？然后我可以编辑我的线程。
什么是md-list、md-list-item、md-divider？我知道这可能对问题没有影响，但是当您提供问题发生的最小代码时，您（和我们）很容易找到问题。
@EliasSoares 好的。那是 Angular Material 的指令。
你为什么要在你的sortBy 函数中做一个orderBy？

标签： javascript angularjs sorting angularjs-ng-repeat angularjs-orderby

【解决方案1】：

如果我理解正确，你想要这种行为：

用户点击所需的列进行排序，表格内容将按该列排序。
用户再次点击，排序方向反转。

对吗？

那么你为什么要订购两倍的阵列呢？

//Default values:
$scope.sortType = 'NAME';
$scope.sortReverse = false;
var orderBy = $filter('orderBy');

//sortBy func:
function sortBy(columnKey) {
    $scope.sortType = columnKey;
    $scope.sortReverse = !$scope.sortReverse;
    // You do not need to order anything here. Just define your orderby parameters here to be used on view.
}

真正的解决方案

作为与问题作者的交谈，我们确实在这里找到了主要问题：

在ng-repeat 上使用:: 语法可避免角度观察OrderBy 过滤器上的更改，因此更改不会反映在视图上。

【讨论】：