如何基于相同的属性对包含不同对象的列表(ngRepeat)进行排序?

时间:2013-10-08 12:02:37

标签: sorting angularjs filter angularjs-ng-repeat

Json包含两个objectsfilefolder

sort基于objects共有的已创建,已知或状态属性。 为了sort我使用Orderby filter,我点击了相应的标题后激活了object's <body ng-controller='VotesCtrl'> <div> <ul> <li class="check" ng-click=> <input type="checkbox" ng-model="master"></input> </li> <li class="created"> <a href="#" ng-click="predicate = 'created'; reverse=!reverse">CREATED</a> </li> <li class="ip"> <a href="#" ng-click="predicate = 'ip'; reverse=!reverse">IP ADDRESS</a> </li> <li class="status"> <a href="#" ng-click="predicate = 'status'; reverse=!reverse">STATUS</a> </li> </ul> <ul ng-repeat="vote in votes | orderBy:predicate:reverse"> <li ng-show="vote.folder" class="check"> <input type="checkbox" ng-model="vote.cb"></input> </li> <li ng-show="vote.folder" class="created"> {{vote.folder.created|date}} </li> <li ng-show="vote.folder" class="ip"> {{vote.folder.ip}} </li> <li ng-show="vote.folder" class="status"> {{vote.folder.status}} </li> <li ng-show="vote.file" class="check"> <input type="checkbox" ng-model="vote.cb"></input> </li> <li ng-show="vote.file" class="created"> {{vote.file.created|date}} </li> <li ng-show="vote.file" class="ip"> {{vote.file.ip}} </li> <li ng-show="vote.file" class="status"> {{vote.file.status}} </li> </ul> </div> </body> 。每个标题代表不同的var webApp = angular.module('webApp', []); //controllers webApp.controller ('VotesCtrl', function ($scope, Votes) { $scope.votes = Votes; $scope.statuses = ["Approved","Pending","Trash","Spam"]; $scope.expand = function(vote) { console.log("show"); $scope.vote = vote; $scope.ip = vote.ip; $scope.date = vote.created; }; $scope.$watch('master', function(newVal, oldVal) { angular.forEach($scope.votes, function(vote) { vote.cb = newVal; }); }); $scope.change = function() { for(var i = 0; i < $scope.votes.length; i++) { if($scope.votes[i].cb) { $scope.votes[i].status = $scope.votes.status; $scope.votes[i].cb = false; $scope.master = false; } $scope.show = false; } }; }); //services webApp.factory('Votes', [function() { //temporary repository till integration with DB this will be translated into restful get query var votes = [ { folder: { id: 1, created: 1381583344653, updated: 1381583344653, ratingID: 4, rate: 5, ip: '198.168.0.0', status: 'APPROVED' } }, { file: { id: 111, created: 1381583344653, updated: 1381583344653, ratingID: 4, rate: 5, ip: '198.168.0.1', status: 'APPROVED' } }, { file: { id: 2, created: 1382387322693, updated: 1381583344653, ratingID: 3, rate: 1, ip: '198.168.0.2', status: 'APPROVED' } }, { file: { id: 22, created: 1382387322693, updated: 1382387322693, ratingID: 3, rate: 1, ip: '198.168.0.3', status: 'APPROVED' } }, { ratingID: 3, file: { id: 222, created: 1382387327693, updated: 1382387327693, ratingID: 3, rate: 1, ip: '198.168.0.4', status: 'APPROVED' } }, { ratingID: 2, file: { id: 3, created: 1383584342663, updated: 1383584342663, ratingID: 2, rate: 5, ip: '198.168.0.5', status: 'APPROVED' } }, { ratingID: 2, file: { id: 4, created: 1384584432742, updated: 1384584432742, ratingID: 2, rate: 5, ip: '198.168.0.6', status: 'SPAM' } }, { folder: { id: 44, created: 1384584532742, updated: 1384584532742, ratingID: 2, rate: 5, ip: '198.168.0.7', status: 'APPROVED' } }, { ratingID: 2, file: { id: 444, created: 1384984232742, updated: 1384984232742, ratingID: 2, rate: 5, ip: '198.168.0.8', status: 'APPROVED' } }, { ratingID: 1, file: { id: 5, created: 1385524346643, updated: 1385524346643, ratingID: 1, rate: 1, ip: '198.168.0.9', status: 'SPAM' } }, { ratingID: 1, file: { id: 6, created: 1386585332621, updated: 1386585332621, ratingID: 1, rate: 1, ip: '198.168.0.10', status: 'APPROVED' } } ]; return votes; }]); 属性。

My code - Plunker

HTML

sort

代码:

list

sort {{1}}无法正常运行,{{1}}我正在做的属性无关紧要。

1 个答案:

答案 0 :(得分:0)

一个技巧是使用函数谓词,如文档所示:

$scope.getter = function(x) {
  if( x.file ) return x.file[$scope.predicate];
  else if( x.folder ) return x.folder[$scope.predicate];
  else return null;
};

然后在HTML中:

<ul ng-repeat="vote in votes | orderBy:getter:reverse">

参见forked plunk:http://plnkr.co/edit/sxKSegy9PgladAT8xu6I?p=preview