根据从服务器返回的值更改指令的顺序

Question

假设我有三个组件：componentA,componentB,componentC，这些组件在我的主页中使用，在页面加载时我收到这些组件的顺序如下：

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

如何在我的主页中按服务器返回的顺序放置这些指令：

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

Answer 1

您可以创建一个排序的键数组：

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"]

然后你可以使用 ng-switch (https://docs.angularjs.org/api/ng/directive/ngSwitch) 同时使用 ng-repeat (https://docs.angularjs.org/api/ng/directive/ngRepeat) 对数组进行迭代。允许你在每个组件上写条件来决定渲染它。

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