我有一个按数组排序的角度表。它的工作原理就像第二级取决于第一级,第三级取决于第二级,依此类推。
例如:
A是B的父母,B是C的父母。
orderby运行良好,直到我想反转它,然后我只希望最后一个子项(在上面的示例C中)重新排序,并且A和B都保持不变。
有可能做到这一点吗?如何?
在下面的plunker中,我只想在单击按钮时更改带有C的行的顺序。
http://plnkr.co/edit/bCwdIg3MNHVdfaX1hvni?p=preview
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-example105-production</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="orderByExample">
<div ng-controller="ExampleController">
<table class="friend">
<tr>
<th>
<button ng-click="toggle_order()">switch order</button>
<span class="sortorder" ng-show="predicate === 'group'" ng-class="{reverse:reverse}"></span>
</th>
<tr ng-repeat="friend in friends | orderBy:predicate:reverse">
<td>{{friend.group}}</td>
</tr>
</table>
</div>
</body>
</html>
js:
(function(angular) {
'use strict';
angular.module('orderByExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.friends = [{
group: ['A']
}, {
group: ['A', 'B1']
}, {
group: ['A', 'B1', 'C1']
}, {
group: ['A', 'B1', 'C2']
}, {
group: ['A', 'B1', 'C3']
}, ];
$scope.predicate = 'group'
$scope.reverse = false;
$scope.toggle_order = function() {
$scope.reverse = !$scope.reverse;
};
}]);
})(window.angular);
此解决方案采用纯Javascript。
您可以应用自定义排序,按长度升序对不等长度的数组进行排序,其余数组从最右边开始降序排列。
var data = [
{ group: ['A', 'B1', 'C2'] },
{ group: ['A', 'B1'] },
{ group: ['A', 'B1', 'C1'] },
{ group: ['A'] },
{ group: ['A', 'B1', 'C3'] }
];
data.sort(function (a, b) {
var l = Math.min(a.group.length, b.group.length),
r = a.group.length - b.group.length;
while (!r && l--) {
r = b.group[l].localeCompare(a.group[l]);
}
return r;
});
document.write('<pre>' + JSON.stringify(data, 0, 4) + '</pre>');