How to update an AngularJS array after sorting?

Question

I am attempting to implement this http://jsfiddle.net/dj_straycat/Q5FWt/3/ in my own program. It works fine when I move an element up in the list, but crashes when I move an element down the list.

$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
});

I use it here

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

I get the following error when $scope.$apply() is called.

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

What am I missing?

EDIT:

Here is all of my code

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

Answer 1

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

Answer 2

Your code updating the array after sorting is fine, as demonstrated in this plunker: http://plnkr.co/Z9jxjZ5Dj2dg8lfsbADN

So your problem is more likely with jQuery and the structure of your html. See this question: Nest jQuery UI sortables

jQuery loses it when an element is both a sortable container and a sortable element within a sortable container.