从数组中按 ID 动态排序 div

Question

我的 angularjs 上有拖放 DIV 网络应用程序。 用户可以对 div 进行排序或选中复选框以添加新的 div，基于 div 位置我获取 DIV ID 并将数组发送到 API，因此当用户再次返回时，一切都像他一样排序。 这是我发送给 API 的内容，没关系

["D", "A", "C"]

问题是当用户回来时，我从 API 数组中获取，我需要对响应数组中的所有内容进行排序。响应与发送数组相同。这是我的 HTML

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="dragulaBox" 
dragula='"sixth-bag"'>
<div class="col-lg-4 col-md-12 col-sm-12 col-xs-12" id="A" ng-if="A">
</div>
<div class="col-lg-4 col-md-12 col-sm-12 col-xs-12" id="B" ng-if="B">
</div>
<div class="col-lg-4 col-md-12 col-sm-12 col-xs-12" id="C" ng-if="C">
</div>
<div class="col-lg-4 col-md-12 col-sm-12 col-xs-12" id="D" ng-if="D">
</div>
<div class="col-lg-4 col-md-12 col-sm-12 col-xs-12" id="E" ng-if="E">
</div>
<div class="col-lg-4 col-md-12 col-sm-12 col-xs-12" id="F" ng-if="F">
</div>
</div>

为此，我不使用ng-repeat，因为我有用于添加新 div 的复选框。

<div class="checkbox-inline">
        <input type="checkbox" class="" id="A" value="A" ng-checked="A" ng-
model="A")"><label>A</label>
</div>
<div class="checkbox-inline">
        <input type="checkbox" class="" id="B" value="B" ng-checked="B" ng-
model="B")"><label>B</label>
</div>
<div class="checkbox-inline">
        <input type="checkbox" class="" id="C" value="C" ng-checked="C" ng-
model="C")"><label>C</label>
</div>
<div class="checkbox-inline">
        <input type="checkbox" class="" id="D" value="D" ng-checked="D" ng-
model="D")"><label>D</label>
</div>
<div class="checkbox-inline">
        <input type="checkbox" class="" id="E" value="E" ng-checked="E" ng-
model="E")"><label>E</label>
</div>
<div class="checkbox-inline">
        <input type="checkbox" class="" id="F" value="F" ng-checked="F" ng-
model="F")"><label>F</label>
</div>

我编写代码以显示数组中唯一具有 ID 的 DIV，但我不知道如何像数组一样进行排序。 有人可以帮我对 div 进行排序吗？

谢谢

编辑： 我在下面的答案中尝试使用指令，但这不起作用

app.directive("arrangeDiv", function(){
return {
    restrict: "A",
    link: function (scope, element, atts ){
        element.sort(function (elem1, elem2) {
            return parseInt(elem1.id) > parseInt(elem2.id);
        }).each(function () {
            var element = $(this);
            element.remove();
            $(element).appendTo("#dragulaBox");
        });

    }
  }
 })

在parrent div中，我在指令属性中传递数组

  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="dragulaBox" 
  dragula='"sixth-bag"' arrange-div="poredakGrafova"></div>

这是响应 API 的数组 ["B","F","E","D"]

Answer 1

jquery div 排序简单：--

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div id="res">
  <div id="3">text 3</div>
  <div id="4">text 4</div>
  <div id="1">text 1</div>
  <div id="2">text 2</div>
</div>
<script>
$("#res div").sort(function (elem1, elem2) {
    return parseInt(elem1.id) > parseInt(elem2.id);
}).each(function () {
    var element = $(this);
    element.remove();
    $(element).appendTo("#res");
});

</script>

Answer 2

Angular js 是这样排序的：--

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

myApp.filter('orderObjectBy', 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;
 }
});

myApp.controller('controller', ['$scope', function ($scope) {
    $scope.orderByAttribute = '';
    
    $scope.testData = {
        123: {name: "Test B", position: "2"},
        456: {name: "Test A", position: "1"},
        789: {name: "Test C", position: "3"}
	};
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='myApp'>
    <div ng-controller="controller">
        <button ng-click="orderByAttribute = 'position'">Order by Position</button>
        <button ng-click="orderByAttribute = ''">Use order in object</button>
        
        <ul>
            <li ng-repeat="item in testData | orderObjectBy:orderByAttribute">
                {{item.name}} (Pos: {{item.position}})
            </li>
        </ul>
    </div>
</div>

Answer 3

在 Angular js 中不使用 ng-repeat：--

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MainController">
  {{item}}  
     <div class="reason-content">
           
           {{item[0].id}} <br>
           {{item[1].id}} <br>
           {{item[2].id}} <br>
           {{item[3].id}} <br>
           
           {{item[0].name}} <br>
           {{item[1].name}} <br>
           {{item[2].name}} <br>
           {{item[3].name}} <br>
           
          </div>
</div>
<script>
angular.module('myApp', [])

.controller('MainController', function ($scope, filterFilter) {

  $scope.foobar = [
    {"id": 15, "name": "bar1"},
    {"id": 25, "name": "bar2"},
    {"id": 215, "name": "bar3"},
    {"id": 7415, "name": "bar4"}
  ];
    $scope.item = filterFilter($scope.foobar);
  
});
</script>