angularJS:将重新排序列表与数据结构同步

angularJS: sync re-ordering list with data structure

本文关键字:列表 数据结构 同步 排序 新排序 angularJS      更新时间:2023-09-26

我是AngularJS的新手。

我正在尝试使用Angular ui可排序插件重新排序一个数组。我希望数据数组与html ul的顺序相同,但似乎无法成功。

var myapp = angular.module('myapp', ['ui']);
myapp.controller('controller', function ($scope) {
    $scope.sortableOptions = {
        start: function (e, ui) {
            $scope.oldIndex = ui.item.index();
        },
        update: function (e, ui) {
            var newIndex = $scope.newIndex = ui.item.index();
            var oldIndex = $scope.oldIndex;
            $scope.oldArray = $scope.list.join(';');
            var item = $scope.list.splice(oldIndex, 1);
            $scope.list.splice(newIndex, 0, item[0]);
            $scope.itemMoved = item;
            $scope.newArray = $scope.list.join(';');
        }
    }
    $scope.list = ["one", "two", "three", "four", "five", "six"];
});
angular.bootstrap(document, ['myapp']);

有什么想法吗?

小提琴:http://jsfiddle.net/DxjXQ/2/

您应该等待Angular更新其范围(应用)

所以可能的解决方案只是设置在队列的末尾

 $timeout(function(){
            $scope.newArray = $scope.list.join(';');
            }, 0);

http://jsfiddle.net/DxjXQ/5/