按属性排序 - 开卷题库

小开

according to http://docs.angularjs.org/api/ng.filter:orderBy , orderBy sorts an array. In your case you're passing an object, so You'll have to implement Your own sorting function.

or pass an array -

$scope.testData = {
C: {name:"CData", order: 1},
B: {name:"BData", order: 2},
A: {name:"AData", order: 3},
}

take a look at http://jsfiddle.net/qaK56/

小开

As you can see in the code of angular-JS ( https://github.com/angular/angular.js/blob/master/src/ng/filter/orderBy.js ) ng-repeat does not work with objects. Here is a hack with sortFunction.

http://jsfiddle.net/sunnycpp/qaK56/33/

<div ng-app='myApp'>
<div ng-controller="controller">
<ul>
<li ng-repeat="test in testData | orderBy:sortMe()">
Order = \{\{test.value.order}} -> Key=\{\{test.key}} Name=:\{\{test.value.name}}
</li>
</ul>
</div>
</div>


myApp.controller('controller', ['$scope', function ($scope) {


var testData = {
a:{name:"CData", order: 2},
b:{name:"AData", order: 3},
c:{name:"BData", order: 1}
};
$scope.testData = _.map(testData, function(vValue, vKey) {
return { key:vKey, value:vValue };
}) ;
$scope.sortMe = function() {
return function(object) {
return object.value.order;
}
}
}]);

小开

最佳答案

AngularJS' orderBy filter does just support arrays - no objects. So you have to write an own small filter, which does the sorting for you.

Or change the format of data you handle with (if you have influence on that). An array containing objects is sortable by native orderBy filter.

Here is my orderObjectBy filter for AngularJS:

app.filter('orderObjectBy', function(){
return function(input, attribute) {
if (!angular.isObject(input)) return input;


var array = [];
for(var objectKey in input) {
array.push(input[objectKey]);
}


array.sort(function(a, b){
a = parseInt(a[attribute]);
b = parseInt(b[attribute]);
return a - b;
});
return array;
}
});

Usage in your view:

<div class="item" ng-repeat="item in items | orderObjectBy:'position'">
//...
</div>

The object needs in this example a position attribute, but you have the flexibility to use any attribute in objects (containing an integer), just by definition in view.

Example JSON:

{
"123": {"name": "Test B", "position": "2"},
"456": {"name": "Test A", "position": "1"}
}

Here is a fiddle which shows you the usage: http://jsfiddle.net/4tkj8/1/

小开

Don't forget that parseInt() only works for Integer values. To sort string values you need to swap this:

array.sort(function(a, b){
a = parseInt(a[attribute]);
b = parseInt(b[attribute]);
return a - b;
});

with this:

array.sort(function(a, b){
var alc = a[attribute].toLowerCase(),
blc = b[attribute].toLowerCase();
return alc > blc ? 1 : alc < blc ? -1 : 0;
});

小开

It's pretty easy, just do it like this

$scope.props = [{order:"1"},{order:"5"},{order:"2"}]


ng-repeat="prop in props | orderBy:'order'"

小开

You should really improve your JSON structure to fix your problem:

$scope.testData = [
{name:"CData", order: 1},
{name:"BData", order: 2},
{name:"AData", order: 3},
]

Then you could do

<li ng-repeat="test in testData | orderBy:order">...</li>

The problem, I think, is that the (key, value) variables are not available to the orderBy filter, and you should not be storing data in your keys anyways

小开

Here is what i did and it works.
I just used a stringified object.

$scope.thread = [
{
mostRecent:{text:'hello world',timeStamp:12345678 }
allMessages:[]
}
{MoreThreads...}
{etc....}
]

<div ng-repeat="message in thread | orderBy : '-mostRecent.timeStamp'" >

if i wanted to sort by text i would do

orderBy : 'mostRecent.text'

小开

Armin's answer + a strict check for object types and non-angular keys such as $resolve

app.filter('orderObjectBy', function(){
return function(input, attribute) {
if (!angular.isObject(input)) return input;


var array = [];
for(var objectKey in input) {
if (typeof(input[objectKey])  === "object" && objectKey.charAt(0) !== "$")
array.push(input[objectKey]);
}


array.sort(function(a, b){
a = parseInt(a[attribute]);
b = parseInt(b[attribute]);
return a - b;
});


return array;
}
})

小开

The following allows for the ordering of objects by key OR by a key within an object.

In template you can do something like:

    <li ng-repeat="(k,i) in objectList | orderObjectsBy: 'someKey'">

Or even:

    <li ng-repeat="(k,i) in objectList | orderObjectsBy: 'someObj.someKey'">

The filter:

app.filter('orderObjectsBy', function(){
return function(input, attribute) {
if (!angular.isObject(input)) return input;


// Filter out angular objects.
var array = [];
for(var objectKey in input) {
if (typeof(input[objectKey])  === "object" && objectKey.charAt(0) !== "$")
array.push(input[objectKey]);
}


var attributeChain = attribute.split(".");


array.sort(function(a, b){


for (var i=0; i < attributeChain.length; i++) {
a = (typeof(a) === "object") && a.hasOwnProperty( attributeChain[i]) ? a[attributeChain[i]] : 0;
b = (typeof(b) === "object") && b.hasOwnProperty( attributeChain[i]) ? b[attributeChain[i]] : 0;
}


return parseInt(a) - parseInt(b);
});


return array;
}
})

小开

I will add my upgraded version of filter which able to supports next syntax:

ng-repeat="(id, item) in $ctrl.modelData | orderObjectBy:'itemProperty.someOrder':'asc'

app.filter('orderObjectBy', function(){


function byString(o, s) {
s = s.replace(/\[(\w+)\]/g, '.$1'); // convert indexes to properties
s = s.replace(/^\./, '');           // strip a leading dot
var a = s.split('.');
for (var i = 0, n = a.length; i < n; ++i) {
var k = a[i];
if (k in o) {
o = o[k];
} else {
return;
}
}
return o;
}


return function(input, attribute, direction) {
if (!angular.isObject(input)) return input;


var array = [];
for(var objectKey in input) {
if (input.hasOwnProperty(objectKey)) {
array.push(input[objectKey]);
}
}


array.sort(function(a, b){
a = parseInt(byString(a, attribute));
b = parseInt(byString(b, attribute));
return direction == 'asc' ? a - b : b - a;
});
return array;
}
})

Thanks to Armin and Jason for their answers in this thread, and Alnitak in this thread.