What is the best way to swap order of divs using angular?

Question

I have a html code where there are three divs, with completely different content.

there is a object called sequence which has div order to be showed can be changed dynamically.

sequence = { "div1": 1, "div2": 3, "div3": 2 }

Depending on the order in the sequence object, I need to order the divs.

I tried making 9 divs and implemented using 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>

Is there any other good way of doing this instead of using 9 divs.

Answer 1

The best way you can achive this is with CSS's flexbox, and use ng-class to assign order to the div according to the condition.

The should look like this:

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

Your CSS styles look like this:

.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;
}