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>

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

1 个答案: