Question

我在我的angularjs上拖放了DIV 网络应用。用户可以对div进行排序或选中复选框以添加新的div，根据我获取DIVs ID的div位置并将数组发送到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吗？

日Thnx

编辑：我尝试使用指令，如回答贝娄，但这不起作用

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 sort easy： -

＆＃13;

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

＆＃13;

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>

按数组

日Thnx

3 个答案: