basierend auf Werten von Server zurück

Question

Stellen Ich habe drei Komponenten: componentA, componentB, componentC, und diese Komponenten verwendet werden, in meiner Hauptseite, auf Seite zu laden erhalte ich die Reihenfolge dieser Komponenten wie so:

{ 
    "componentA": 3, 
    "componentC": 2, 
    "componentB": 1 
} 

Wie kann ich setzen diese Richtlinien, um durch Server in meinem Haupt-Seite zurückgegeben:

<div class="container"> 
    <componentB></componentB> 
    <componentC></componentC> 
    <componentA></componentA> 
</div> 

Answer 1

Sie können ein Array der Schlüssel sortiert erstellt:

var list = { 
    "componentA": 3, 
    "componentC": 2, 
    "componentB": 1 
} 

var listSorted = Object.keys(list).sort(function(a,b){return list[a]-list[b]}) 
console.log(listSorted) // ["componentB", "componentC", "componentA"] 

Dann können Sie ng-Schalter (https://docs.angularjs.org/api/ng/directive/ngSwitch) Während Verwendung ng-Repeat (https://docs.angularjs.org/api/ng/directive/ngRepeat) iterativ über das Array. Sie können Bedingungen für jede Komponente schreiben, um festzustellen, ob sie gerendert werden soll.

<div ng-repeat="componentName in $ctrl.listSorted track by $index" 
ng-switch="componentName"> 
    <componentA ng-switch-when="componentA">...</componentA> 
    <componentB ng-switch-when="componentB">...</componentB> 
    <componentC ng-switch-when="componentC">...</componentC> 
</div>