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

can you provide some more code, or better yet, a live demo of your code? — Eliran Malka
– Eliran Malka, Commented Mar 17, 2014 at 23:20

Dan Burgener · Accepted Answer · 2014-03-19 17:46:42Z

2

I was able to fix the problem by changing from jquery 1.8.24 to jquery 1.10.4

edited Mar 19, 2014 at 17:46

answered Mar 19, 2014 at 17:23

Dan Burgener

8368 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ketan Over a year ago

This worked for me, I am using the Sortable plugin with AngularJs and had the same problem when I upgraded the Angular version to 1.2.14 and it starting showing this exact behavior. Upgrading to the latest in JQuery core and UI worked.

Community · Accepted Answer · 2017-05-23 11:59:46Z

0

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.

edited May 23, 2017 at 11:59

CommunityBot

11 silver badge

answered Mar 18, 2014 at 3:12

j.wittwer

9,4973 gold badges32 silver badges32 bronze badges

Collectives™ on Stack Overflow

How to update an AngularJS array after sorting?

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related