You can use flex to change the order of the HTML elements very easily.
let changeOrder = () => {
const stackOrder = [{name: "A", order: 3}, {name: "B", order: 1}, {name: "C", order: 2}];
for (let item of stackOrder) {
$('#' + item.name)[0].style.order = item.order;
}
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container" style="display: flex; flex-direction: column;">
<div id="A"> Form elements for A</div>
<div id="B"> Elements that go to B</div>
<div id="C"> CCC ccAadas</div>
</div>
<input type="button" value="ascending" onclick="changeOrder()">
You can use custom ordering in angular js with ng-repeat functionality. below is working example.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
<h1 ng-repeat="x in records | orderBY:'order'">{{x.name}}</h1>
<script>
var app = angular.module("myApp", []);
app.filter('orderBY', function(){
return function(input, attribute) {
if (!angular.isObject(input)) return input;
var array = [];
for(var objectKey in input) {
array.push(input[objectKey]);
}
array.sort(function(a, b){
a = parseInt(a[attribute]);
b = parseInt(b[attribute]);
return a - b;
});
return array;
}
});
app.controller("myCtrl", function($scope) {
$scope.records =[{name: "A", order: 3}, {name: "B", order: 1}, {name: "C", order: 2}]
});
</script>
</body>
</html>
You can use lodash library to order your results, consider the below. Assuming list is what you’re getting returned from the database, use the _.orderBy function and pick which field you want to sort by
const _ = require('lodash')
....
const list = [{name: "A", order: 3}, {name: "C", order: 2}, {name: "B", order: 1}]
const sorted = _.orderBy(list, 'name')
First you can start by sorting out the array based on orders
order.sort((a, b) => {
return a.order - b.order;
});
Once that is done, loop through the array, where during every iteration you create a div and append it to main container.
for (let i = 0; i < order.length; i++) {
let div = document.createElement("div");
div.id = order[i].name;
div.innerText = `This is ${order[i].name} div`; // for displaying test purposes
document.getElementById('main').appendChild(div);
}
Full example here:
https://jsfiddle.net/bg7sh2rx/
How do I change order of <div> and elements in it based on order that I get from database?
Let’s say this is my HTML:
<div id="container">
<div id="A"> Form elements for A</div>
<div id="B"> Elements that go to B</div>
<div id="C"> CCC ccAadas</div>
</div>
And this is list with order:
$scope.order = [{name: "A", order: 3}, {name: "B", order: 1}, {name: "C", order: 2}]
What can I do to display div B, then div C, and last div A?
The idea here is that each div is input form with several input elements and each form is defferent with different data. The user can choose in which order wants to fill them and that order is stored in database. So I would like to define all that forms in HTML, and when I know the right order display them accordingly
Thank you. Exactly what I needed.
Thank you for your answer. But I have 7 divs and each of them is different form that user can input data in. The idea is that user can choose in which order forms will be filled and that order is stored in database. I understand your idea here, but still don’t know how to insert my div with form in example you provided.
Well, where do the forms come from and how do they look like? Just create an array of elements that contain the forms and then display it like that
