我Json
包含两个objects
:file
和folder
。
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;
}]);
属性。
HTML
sort
代码:
list
sort
{{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