CODEWITHSUNDEEP
javascripthtmlangularjs
hazrmard
hazrmard

Reputation: 3661

AngularJS - How to change order of divs?

How do I change the order div elements are displayed in given a preferred order? I am making my application in AngularJS, so pure JavaScript or Angular based answers are welcome.

Here's what my html looks like:

<div id="A">{{content for A}}</div>
<div id="B">{{content for B}}</div>
<div id="C">{{content for C}}</div>

In my script there are variables that describe preferred order: 

orderOfA = 2;
orderOfB = 3;
orderOfC = 1;

I want to render the contents so, based on the above values for example, the order of div is C, A, B.

Upvotes: 0

Views: 4383

Answers (3)

Khalid Hussain
Khalid Hussain

Reputation: 1694

Working Plnkr

HTML

<div id="container">
      <div id="A">Content of A</div>
      <div id="B">Content of B</div>
      <div id="C">Content of C</div> 
 </div>

JavaScript

var orDerPrecedence = [{"A":2},{"B":3},{"C":1}];

   orDerPrecedence = orDerPrecedence.sort(function(a, b) {
       var valueOfA =  Object.keys(a).map(function(key){return a[key]})
       var valueOfB =  Object.keys(b).map(function(key){return b[key]})
       return (valueOfA > valueOfB ? 1 : (valueOfA < valueOfB) ? -1 : 0);

    });  
    var numericallyOrderedDivs = [];
    for(element in orDerPrecedence){
        numericallyOrderedDivs[numericallyOrderedDivs.length] = jQuery("#"+Object.keys(orDerPrecedence[element]));           
    }

    $("#container").html(numericallyOrderedDivs);

Upvotes: 0

Jaydo
Jaydo

Reputation: 1859

Expanding on Awakening Byte's answer, you can use ngBindHtml to bind HTML. 

var app = angular.module('app', ['ngSanitize']);

app.controller("controller", function($scope) {
  $scope.elements = [
    {html: "<div id='A'>Div A</div>", order: 2},
    {html: "<div id='B'>Div B</div>", order: 3},
    {html: "<div id='C'>Div C</div>", order: 1}
  ];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-sanitize.min.js"></script>

<div ng-app="app" ng-controller="controller">
  <div ng-repeat="elem in elements | orderBy:'order'" ng-bind-html="elem.html">
  </div>
</div>

Upvotes: 0

George Chen
George Chen

Reputation: 6939

There is a built-in OrderBy filter for ng-repeat

in your controller

$scope.values = [{"name": "valueA", order: 2}
  ,{"name": "valueB", order: 3}
  ,{"name": "valueC", order: 1} ]

in view

<div ng-repeat="value in values | orderBy: 'order'">
   {{value.name}}
</div>

Upvotes: 2

Related Questions