[英]Sorting columns in nested ng-repeat (AngularJS)
Currently I don't have any possibility to sort the columns of my list by using the orderBy
-filter. 目前,我无法使用orderBy
-filter对列表中的列进行排序。 The problem what I have is a nested ngRepeat. 我遇到的问题是嵌套的ngRepeat。
View: 视图:
<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>
As soon as the user click on a column header the function sortBy
will be invoked. 用户单击列标题后,将立即调用sortBy
函数。 The function is implemented in the controller as follows: 该功能在控制器中实现如下:
//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);
}
The list sorts just by the default value name
. 该列表仅按默认值name
排序。 Here is the array output of GET-request: 这是GET-request的数组输出:
//JSON data
[
{
"ArtNo": "DE123",
"SHORTCODE": "ABC",
"NAME": "article one",
"QUANTITY": 3,
"GROUPID": 1,
"ACTIVE": 1
},...
]
So, I need nested ngRepeat because how you can see the array is defined with key numbers and object values => [0:Object, 1:Object...]
. 因此,我需要嵌套的ngRepeat,因为您如何看到数组是由键号和对象值=> [0:Object, 1:Object...]
。 I need just a solution for my sortBy
-function. 我只需要针对我的sortBy
函数的解决方案。 Have anyone an idea? 有任何想法吗?
The following is my output list: 以下是我的输出列表:
ArtNo | SHORTCODE | NAME | QUANTITY
DE123 | ABC001 | article one | 3
DE456 | ABC002 | article two | 8
DE789 | ABC003 | article three | 4
DE321 | ABC004 | article four | 13
....
If I understood right, you want this behavior: 如果我理解正确,则您需要这种行为:
Right? 对?
So why are you ordering twice your array? 那么,为什么要订购两次阵列?
//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.
}
As talk with question author, we did found the main problem here: 与问题作者交谈时,我们确实在这里发现了主要问题:
The use of ::
syntax on ng-repeat
avoids angular from watching changes on OrderBy
filter, so the change did not reflect on view. 在ng-repeat
上使用::
语法可避免angular观看OrderBy
过滤器上的更改,因此更改不会反映在视图上。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.