javascript - 如何在 AngularJS 中交换 div 元素的顺序？

Question

如何使用 Angular 的数据绑定(bind)更改 div 元素(包括文本框和下拉列表)的顺序？ div 的顺序应相应更改用户登录意味着如果用户类型为 A，则 div A 应位于顶部，如果用户类型为 B，则 div B 应位于顶部，其他 div 元素将位于其下方，依此类推。纯粹用 AngularJS 制作。

这是 HTML:

<div id="A"> A <input type="text" ng-model="Model.AName" disabled /></div>
<div id="B"> B <input type="text" ng-model="Model.BName" disabled /></div>
<div id="C"> C <input type="text" ng-model="Model.CName" disabled /></div>

在 AngularJS Controller 中:

 $scope.orderArr = [{ "A": 2}, { "B": 3 }, { "C": 1 }];

结果将是: C A

Answer 1

要管理订单，您必须创建代表输入的数组。

$scope.inputs = [
  {
    name: 'AName',
    order: 1
  },
  {
    name: 'BName',
    order: 2
  },
  {
    name: 'CName',
    order: 0
  }
];

然后使用循环显示它:

<div id="A" ng-repeat="input in inputs | orderBy: 'order'">
  {{ input.name }}
  <input type="text" disabled ng-model="Model[input.name]">
</div>

通过这种方式，您可以通过更改属性 order 来管理 Controller 中的顺序。 您可以创建条件语句，根据权限设置输入的顺序。