如何基于相同属性对包含不同对象的列表（ngRepeat）进行排序？

我有Json含有两个objects：file和folder。如何基于相同属性对包含不同对象的列表（ngRepeat）进行排序？

sort基于objects共同创建的，ip或状态属性。为了sort我用Orderbyfilter一旦我点击适当的标题（每个标题代表不同的object's属性）就会被激活。

HTML

<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; 
}]);

的sort上没有list正常工作，并不要紧由物业我我正在做sort。

来源

2013-10-08 Canttouchit

一个技巧是使用一个功能谓词，指示由文档：

$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">

见分叉普拉克：http://plnkr.co/edit/sxKSegy9PgladAT8xu6I?p=preview

来源

2013-10-08 12:14:05

尼斯把戏！为什么这种排序不能正确处理IP地址？ – Canttouchit

它工作得很好，因为它是* string * comparison，其中'“1.2.3.4”>“1.2.3.10”'，因为'“4”>“1”'）。 –

是的，我明白，我认为没有解决方案，我需要建立客户过滤器来解决这个问题。 – Canttouchit

如何基于相同属性对包含不同对象的列表（ngRepeat）进行排序？

回答

相关问题