Sorting only certain arrays in nested ngRepeat
我目前有一个嵌套的 ngRepeat,其中内部循环迭代来自其父级的项目集合。摘录:
1 2 3 4 5 6 7 8 9 10 11 12 | (Irrelevant code here.) <table> <tr> <th ng-click="setItemOrder('name')">Item name</th> <th ng-click="setItemOrder('number')">Item number</th> </tr> <tr ng-repeat="item in person.items | orderBy:itemOrder"> <td>{{item.name}} <td>{{item.number}} </tr> </table> |
通过单击表标题,我将控制器中的
1 2 3 | $scope.setItemOrder = function(order){ $scope.itemOrder = order; } |
这一切正常,除了如果我单击一个
有没有办法让 ngRepeat 只将
尝试将属性设置为相应的 person 实例,如下所示:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | angular.module('test', []).controller('testController', function($scope) { $scope.persons = [{ items: [{ name: 'test', number: 2 }, { name: 'test1', number: 1 }] }, { items: [{ name: 'test3', number: 5 }, { name: 'test4', number: 4 }] }]; $scope.setItemOrder = function(person, order) { person.itemOrder = order; } }); |
1 2 3 4 5 6 7 8 9 10 11 12 13 | <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"> <form ng-app="test" ng-controller="testController"> <table> <tr> <th ng-click="setItemOrder(person,'name')">Item name</th> <th ng-click="setItemOrder(person,'number')">Item number</th> </tr> <tr ng-repeat="item in person.items | orderBy:person.itemOrder"> <td>{{item.name}} <td>{{item.number}} </tr> </table> |
您可以为每个人添加一个排序变量,并使用 person 对象扩展 setItemOrder。然后你可以调用:
1 | setItemOrder(person, 'name'); |
然后在 ngRepeat:
中使用它
1 | orderBy:person.itemOrder |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | angular.module('test', []).controller('testController', function($scope) { $scope.ordersort=true; $scope.orderfield='number'; $scope.persons = { "items": [{ "name": 'test', "number": 2 }, { "name": 'test1', "number": 1 }], "item1": [{ "name": 'test3', "number": 5 }, { "name": 'test4', "number": 4 }] }; $scope.setItemOrder = function(person, order) { $scope.orderfield=order; person.itemOrder = order; $scope.ordersort= !$scope.ordersort; } }); |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"> <form ng-app="test" ng-controller="testController"> <table> <tr> <th ng-click="setItemOrder(person,'name')">Item name</th> <th ng-click="setItemOrder(person,'number')">Item number</th> </tr> <tr ng-repeat="item in person | orderBy:orderfield:ordersort"> <td>{{item.name}} <td>{{item.number}} </tr> </table> |
我已经修改了您的示例。在这个例子中,表格排序工作得很好。但是当我单击该表标题时,它不会对特定表进行排序。无论如何要按特定表对列进行排序?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | angular.module('test', []).controller('testController', function($scope) { $scope.persons = [{ items: [{ name: 'test', number: 2 }, { name: 'test1', number: 1 }] }, { items: [{ name: 'test3', number: 5 }, { name: 'test4', number: 4 }] }]; $scope.setItemOrder = function(person, order) { person.itemOrder = order; } }); |
1 2 3 4 5 6 7 8 9 10 11 12 13 | <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"> <form ng-app="test" ng-controller="testController"> <table> <tr> <th ng-click="setItemOrder(person,'name')">Item name</th> <th ng-click="setItemOrder(person,'number')">Item number</th> </tr> <tr ng-repeat="item in person.items | orderBy:person.itemOrder"> <td>{{item.name}} <td>{{item.number}} </tr> </table> |