ngRepeat - Sortiere Objekt zuerst nach bestimmten Schlüsseln - javascript, angularjs

Ich schreibe eine AngularJS-Anwendung (Angular 1), für die eine Liste von Tabellen auf der Seite angezeigt werden muss. Bestimmte Schlüssel müssen jedoch zuerst wie folgt angezeigt werden:

<div>baz (data)</div>
<div>bar (data)</div>
<div>foo (data)</div>
<div>baa (data)</div>

Ich habe herausgefunden, dass ich das benutzen muss orderBy-Filter, aber ich kann nicht scheinen, das zum Laufen zu bringen. Weiß jemand, wie ich das erreichen könnte?

JS:

angular.module("MyModule").controller("Test", function() {

this.sort = ["baz", "bar"];

this.data = {
"foo": { /* snip */ },
"bar": { /* snip */ },
"baz": { /* snip */ },
"baa": { /* snip */ }
};

});

HTML:

<div ng-controller="Test as T">
<div ng-repeat="(title, row) in T.data"> <!-- Not sure how I would go about sorting these keys by certain ones first -->
{{ title }} ({{ row }})
</div>
</div>

Antworten:

Sie müssen verwenden orderBy was leider nicht mit Objekten funktioniert, so dass Sie eine benutzerdefinierte schreiben müssen toArray Filter.

angular.module("MyModule").controller("Test", function() {

this.data = {
"foo": { /* snip */ },
"bar": { /* snip */ },
"baz": { /* snip */ },
"baa": { /* snip */ }
};

this.customSort = function(a, b){
/* Whatever way you need to do this */
var sort = ["baz", "bar"];
return sort.indexOf(a) < sort.indexOf(b) ? 1 : -1;
}

}).filter("toArray", function () {

return function (obj) {
if (!(obj instanceof Object)) {
return obj;
}

return Object.keys(obj).map(function (key) {
return Object.defineProperty(obj[key], "$key", {__proto__: null, value: key});
});
}
});

HTML

<div ng-controller="Test as T">
<div ng-repeat="item in T.data | toArray | orderBy: $key : false : T.customSort">
{{ item.$key }} ({{ item.value }})
</div>
</div>

Angular orderBy docs und Diskussion über orderBy für Objekte

Das Schlüsselwertpaar muss in eckige Klammern gesetzt werden. benutze die ng-repeat so was

<div ng-repeat="(title, row) in T.data">

Demo

angular.module("app",[])
.controller("ctrl",function($scope){
this.sort = ["baz", "bar"];

this.data = {
"foo": {"val":"ss"},
"bar": { "val":"cc" },
"baz": { "val":"vv"},
"baa": { "val":"aa" }
};
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl as T">
<div ng-repeat="(title, row) in T.data">
{{ title }} ({{ row }})
</div>
</div>

<div ng-repeat="item in T.data | orderBy: customFilter
{{ item.$key }} ({{ item.value }}

this.customFilter(obj){
switch(key){//key is actual value of cases like `baz`,`bar`
case "baz":return 0;
case "bar":return 1;
case "foo":return 2;
case "baa":return 3;
default:return 99;
}
}