ngRepeat - Triez d'abord les objets par clés spécifiques - javascript, angularjs

J'écris une application AngularJS (Angular 1) qui nécessite une liste de tables à afficher sur la page. Cependant, certaines clés doivent d'abord être affichées comme ceci:

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

J'ai compris que je devais utiliser le ordrePar filtre, mais je ne parviens pas à faire fonctionner cela. Est-ce que quelqu'un sait comment je pourrais y parvenir?

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>

Réponses:

Vous aurez besoin d'utiliser orderBy qui malheureusement ne fonctionne pas avec les objets donc vous devrez écrire un custom toArray filtre.

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>

Ordre angulaire et Discussion sur orderBy pour les objets

Besoin d'encapsuler la paire valeur / clé entre crochets. Utilisez le ng-repeat comme ça

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

Démo

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;
}
}