繁体   English   中英

对嵌套ng-repeat(AngularJS)中的列进行排序

[英]Sorting columns in nested ng-repeat (AngularJS)

目前,我无法使用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函数的解决方案。 有任何想法吗?

以下是我的输出列表:

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

如果我理解正确,则您需要这种行为:

  • 用户单击所需的列进行排序,表格内容将由该列排序。
  • 用户再次单击,排序方向将反转。

对?

那么,为什么要订购两次阵列?

//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上使用::语法可避免angular观看OrderBy过滤器上的更改,因此更改不会反映在视图上。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM