Was ich versuche zu tun, ist einige Daten nach Eigenschaft sortieren. Hier ist ein Beispiel, dass ich dachte, sollte funktionieren, aber es tut nicht.
HTML-Teil:
<div ng-app='myApp'>
<div ng-controller="controller">
<ul>
<li ng-repeat="(key, value) in testData | orderBy:'value.order'">
{{value.order}}. {{key}} -> {{value.name}}
</li>
</ul>
</div>
</div>
JS-Teil:
var myApp = angular.module('myApp', []);
myApp.controller('controller', ['$scope', function ($scope) {
$scope.testData = {
C: {name:"CData", order: 1},
B: {name:"BData", order: 2},
A: {name:"AData", order: 3},
}
}]);
Und das Ergebnis:
- A -> AData
- B -> BData
- C -> CData
... die IMHO wie folgt aussehen sollte:
- C -> CData
- B -> BData
- A -> AData
Habe ich etwas übersehen (hier ist ein fertiges [JSFiddle][1] zum Experimentieren)?
AngularJS' orderBy Filter unterstützt nur Arrays - keine Objekte. Sie müssen also einen eigenen kleinen Filter schreiben, der die Sortierung für Sie übernimmt.
Oder das Format der Daten ändern, mit denen Sie arbeiten (wenn Sie darauf Einfluss haben). Ein Array, das Objekte enthält, ist mit dem nativen orderBy-Filter sortierbar.
Hier ist mein orderObjectBy Filter für 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;
}
});
Verwendung in Ihrer Ansicht:
<div class="item" ng-repeat="item in items | orderObjectBy:'position'">
//...
</div>
Das Objekt benötigt in diesem Beispiel ein Positionsattribut, aber Sie haben die Flexibilität, jedes beliebige Attribut in Objekten zu verwenden (das eine ganze Zahl enthält), einfach durch Definition in der Ansicht.
Beispiel JSON:
{
"123": {"name": "Test B", "position": "2"},
"456": {"name": "Test A", "position": "1"}
}
Hier ist ein Fiddle, das Ihnen die Verwendung zeigt:
Wie man im Code von angular-JS ( https://github.com/angular/angular.js/blob/master/src/ng/filter/orderBy.js ) sehen kann, funktioniert ng-repeat nicht mit Objekten. Hier ist ein Hack mit sortFunction.
<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;
}
}
}]);
nach http://docs.angularjs.org/api/ng.filter:orderBy , orderBy sortiert ein Array. In Ihrem Fall übergeben Sie ein Objekt, also müssen Sie Ihre eigene Sortierfunktion implementieren.
oder ein Array übergeben -
$scope.testData = {
C: {name:"CData", order: 1},
B: {name:"BData", order: 2},
A: {name:"AData", order: 3},
}
schauen Sie sich
an.