目前,我无法使用 orderBy
过滤器对列表的列进行排序。我遇到的问题是嵌套的 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
函数就会被调用。该功能在 Controller 中实现如下:
//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);
}
列表仅按默认值名称
排序。这是 GET 请求的数组输出:
//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
过滤器上的更改,因此更改不会反射(reflect)在查看。
关于javascript - 对嵌套 ng-repeat 中的列进行排序(AngularJS),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40753365/