排序后如何更新AngularJS数组？答案

【问题标题】：How to update an AngularJS array after sorting?排序后如何更新AngularJS数组？
【发布时间】：2014-03-17 23:08:13
【问题描述】：

我正在尝试在我自己的程序中实现这个http://jsfiddle.net/dj_straycat/Q5FWt/3/。当我在列表中向上移动一个元素时它可以正常工作，但是当我在列表中向下移动一个元素时它会崩溃。

$scope.testSteps = [];
$scope.dragStart = function (e, ui) {
  ui.item.data('start', ui.item.index());
}

$scope.dragEnd = function (e, ui) {
  var start = ui.item.data('start'),
  end = ui.item.index();

  $scope.testSteps.splice(end, 0, $scope.testSteps.splice(start, 1)[0]);
  $scope.$apply();
}

var sortableEle;
    sortableEle = $('#sortable').sortable({
    start: $scope.dragStart,
    update: $scope.dragEnd
});

我在这里使用它

<tbody id="sortable">
            <tr data-ng-repeat="testStep in testSteps">
                <td>{{testStep}}</td>
            </tr>
</tbody>

调用 $scope.$apply() 时出现以下错误。

Error: Failed to execute 'insertBefore' on 'Node': The new child element contains the parent.

我错过了什么？

编辑：

这是我所有的代码

@model TestSteps.Models.TestStep

@{
ViewBag.Title = "TestStep";
}

<h2>TestStep</h2>
<div data-ng-app="app" data-ng-controller="appcontrol">
<table class="table">
    <tbody class="sortable">
        <tr data-ng-repeat="testStep in testSteps">
            <td>{{testStep}}</td>
        </tr>
    </tbody>
</table>
</div>


@section Scripts{
@Scripts.Render("~/bundles/jqueryval")
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-1.8.2.js")">    </script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-ui-1.8.24.js")">    </script>    
<script type="text/javascript" src="@Url.Content("~/Scripts/angular.js")"></script>
<script type="text/javascript">
    var app = angular.module("app", []);
    app.controller("appcontrol", function ($scope) {
        $scope.testSteps = [{ Id: 5, Name: 'Five', Step:1 }, { Id: 4, Name: 'Four', Step:2 }, { Id: 6, Name: 'Six', Step:3 }];

        $scope.dragStart = function (e, ui) {
            ui.item.data('start', ui.item.index());
        }

        $scope.dragEnd = function (e, ui) {
            var start = ui.item.data('start'),
                end = ui.item.index();

            $scope.testSteps.splice(end, 0, $scope.testSteps.splice(start, 1)[0]);
            for (var i = 0; i < $scope.testSteps.length; i++) {
                $scope.testScriptSteps[i].Step = i + 1;
            }
            $scope.$apply();
        }

        var sortableEle;
        sortableEle = $('.sortable').sortable({
            opacity: 0.5,
            start: $scope.dragStart,
            update: $scope.dragEnd
        });
    });
</script>
}

【问题讨论】：

您能否提供更多代码，或者更好的是，您的代码的现场演示？
我添加了所有代码。

标签： javascript angularjs

【解决方案1】：

我能够通过从 jquery 1.8.24 更改为 jquery 1.10.4 来解决问题

【讨论】：

这对我有用，我正在使用带有 AngularJs 的 Sortable 插件，当我将 Angular 版本升级到 1.2.14 并开始显示这种确切行为时遇到了同样的问题。升级到最新的 JQuery 核心和 UI 工作正常。

【解决方案2】：

排序后更新数组的代码没问题，如以下 plunker 所示：http://plnkr.co/Z9jxjZ5Dj2dg8lfsbADN

所以你的问题更可能是 jQuery 和你的 html 的结构。看到这个问题：Nest jQuery UI sortables

当一个元素既是可排序容器又是可排序容器中的可排序元素时，jQuery 会丢失它。

【讨论】：