如何在AngularJS中交换div元素的顺序？ [英] How to swap order of div element in AngularJS?

问题描述

如何更改div元素的顺序，其中包含文本框和使用角度数据绑定的下拉列表？如果用户类型是A，那么div的顺序应该相应地改变，如果用户类型是A，那么div A应该在顶部，如果用户类型是B，则div B应该在顶部，并且其他div元素将在顶部，等等。应用程序是纯粹在AngularJS中制作。

这里是HTML：

 < div id =A > A< input type =textng-model =Model.ANamedisabled />< / div> 
< div id =B> B< input type =textng-model =Model.BNamedisabled />< / div> 
< div id =C> C< input type =textng-model =Model.CNamedisabled />< / div> 
  

在AngularJS Controller中：

  $ scope.orderArr = [{A：2}，{B：3}，{C：1}]; 
  

结果将会是：
C
A
B <为了管理订单，您必须创建数组表示输入。

<$ p $

$ scope.inputs = [
{
name：'AName'，
order：1
}，
{
名称：'BName'，
命令：2
}，
{
名称：'CName'，
命令：0
}
];


然后使用循环显示它：

 < div id =Ang-repeat =input in inputs | orderBy：'order'> 
 {{input.name}} 
< input type =textdisabled ng-model =Model [input.name]> 
< / div> 
  

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

How do i change the order of div elements which includes textbox and dropdown with angular's data binding?. The order of div should change accordingly users login means if user type is A then div A should be on top, if user type is B then div B should be on top and other div elements will below that and so on.. The app is purely made in AngularJS.

Here's 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>

In AngularJS Controller:

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

Result will be: C A B

解决方案

To manage order you have to create array represent inputs.

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

And then display it using a loop:

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

In this way you can manage the order in your controller by changing the property order. You can create conditional statements, which depending on the Permission set the order of your inputs.

这篇关于如何在AngularJS中交换div元素的顺序？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！