我在我的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吗？
编辑： 我尝试使用指令，如回答贝娄，但这不起作用
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”]
答案 0 :(得分：3)
jquery div sort easy： -
<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>
答案 1 :(得分：1)
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>
答案 2 :(得分：1)
在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>