CODEWITHSUNDEEP
htmlcssangularjs
Ganesh J
Ganesh J

Reputation: 75

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

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.

Upvotes: 4

Views: 3527

Answers (3)

ohboy21
ohboy21

Reputation: 4319

Change your sequence to an Array:

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

Then in your HTML:

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

Upvotes: 0

inQstvJS
inQstvJS

Reputation: 303

You are looking for something like this :

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

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

Upvotes: 0

Amir Suhail
Amir Suhail

Reputation: 1304

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

Upvotes: 4

Related Questions