Question

我有一个html代码，其中有三个div，内容完全不同。

有一个名为sequence的对象，其中显示的div顺序可以动态更改。

sequence = {＆＃34; div1＆＃34;：1，＆＃34; div2＆＃34;：3，＆＃34; div3＆＃34;：2}

根据序列对象的顺序，我需要订购div。

我尝试制作9个div并使用ng-if

实现

<div ng-if="sequence.div1=1"></div>
<div ng-if="sequence.div2=1"></div>
<div ng-if="sequence.div3=1"></div>
<div ng-if="sequence.div1=2"></div>
<div ng-if="sequence.div2=2"></div>
<div ng-if="sequence.div3=2"></div>
<div ng-if="sequence.div1=3"></div>
<div ng-if="sequence.div2=3"></div>
<div ng-if="sequence.div3=3"></div>

还有其他好办法吗，而不是使用9个div。

Answer 1

你可以通过CSS的flexbox实现这一目标，并使用ng-class根据条件为div分配顺序。

应该是这样的：

<div class="wrapper-div">
   <div ng-class="{'order-1': sequence.div1==1, 'order-2': sequence.div1==2, 'order-3': sequence.div1==3}">
      div one content
   </div>
   <div ng-class="{'order-1': sequence.div2==1, 'order-2': sequence.div2==2, 'order-3': sequence.div2==3}">
      div two content
   </div>
   <div ng-class="{'order-1': sequence.div3==1, 'order-2': sequence.div3==2, 'order-3': sequence.div3==3}">
      div three content
   </div>
</div>

您的CSS样式如下所示：

.wrapper-div {
    display: flex;
    flex-direction: column; //flex-direction wont work in IE, its okay here since child elements are div or give 100% width to child elements
}

.order-1 {
   order: 1;
}

.order-2 {
   order: 2;
}

.order-3 {
   order: 3;
}

Answer 2

你正在寻找这样的东西：

<div ng-controller="TodoListController">
    <div ng-repeat="div in divArray">
       {{div}}
    </div>
  </div>

https://plnkr.co/edit/xJxpKoakmvuL7NfTnEmK?p=preview

Answer 3

将您的序列更改为Array：

const sequence = [{'order': 'order-1'}, {'order': 'order-2'}, {'order': 'order-3'}];

然后在HTML：

<div ng-repeat="div in $scope.sequence" ng-class="{div.order}">
</div>

使用angular交换div的顺序的最佳方法是什么？

3 个答案: