Ich bin in Bezug auf die eckige Dokumentation Über ngRepeat und Iterieren über Objekteigenschaften, die angeben:
<div ng-repeat="(key, value) in myObj"> ... </div>
Sie müssen sich bewusst sein, dass das JavaScriptSpezifikation definiert nicht die Reihenfolge der für ein Objekt zurückgegebenen Schlüssel. (Um dies in Angular zu mildern 1.3 Die ngRepeat-Direktive zum Sortieren der Schlüssel in alphabetischer Reihenfolge.)
Angenommen, ich habe folgendes Objekt:
var myObj = {FOO: 0, BAR: 1};
und möchte, dass es nach Wert geordnet wird (d. h. 0 & 1) anstelle von Schlüsseln. Wie kann dies mit eckigen erreicht werden? (Ich benutze übrigens Winkel 1,3).
Ich habe versucht:
ng-repeat="(key, value) in myObj | orderBy:value"
Aber es funktioniert nicht...
Kann mir bitte jemand helfen?
Antworten:
0 für die Antwort № 1Genau wie bei filter funktioniert orderBy nur mit Arrays. Eine einfache Lösung besteht darin, eine Funktion zu verwenden, die ein Array von einem Objekt zurückgibt:
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="namesCtrl">
<input type="text" ng-model="searchText"/>
<ul ng-init="nameArray=objArray(names)">
<li ng-repeat="x in nameArray | filter:searchText | orderBy: "value.name"">
{{x.value.name}}
</li>
</ul>
</div>
<script>
angular.module("myApp", []).controller("namesCtrl", function($scope) {
$scope.searchText="";
$scope.names = {
"1": {
"name": "some"
},
"2": {
"name": "values"
},
"3": {
"name": "are"
},
"4": {
"name": "there"
},
"5": {
"name": "here"
}
};
$scope.objArray=function (obj) {
var result=[];
for (var key in obj) {
result.push({
key: key,
value: obj[key]
});
}
return result;
}
});
</script>
</body>
</html>
0 für die Antwort № 2
Ich glaube, die beste und eleganteste Lösung besteht darin, einen Filter zu erstellen, der Ihr Objekt in ein Array verwandelt. Daher können Sie es wiederverwenden, dachte alle Ihre Projekte in Ihrer Vorlage, ohne js zu codieren.
So würde der Filter aussehen:
(function () {
"use strict";
angular.module("app").filter("toArray", toArray);
toArray.$inject = [];
function toArray() {
return toArrayFilter;
function toArrayFilter(input) {
if (angular.isArray(input)) return input;
var list = [];
angular.forEach(input, iterateProperty, list);
return list;
function iterateProperty(elt, key) {
this.push({ key: key, value: elt });
}
}
}
})();
und hier ist, wie Sie es in Ihrer HTML-Vorlage verwenden würden:
<div ng-repeat="element in myObject | toArray | orderBy:value">
{{element.key}}:
<pre>{{element.value | json}}</pre>
</div>