Sortable does not work with AngularJS ng-repeat

[Mike]

I am confused why there is an AngularJS integration for Sortable Widget, when it doesn't support using ng-repeat.  In the demo here (http://demos.telerik.com/kendo-ui/sortable/index) - there is a hardcoded list of Li items that are being sorted.  However, no one using AngularJS is going to use a hard-coded list, they will use an ng-repeat from a data model.

The visual sort functionality of course works using an ng-repeat.  But once you move a list item, it does not update the data model source, rendering this widget pretty much useless for someone using Angular.  This widget needs a datasource integration.  

Please don't pretend to do these half-ass integrations any more.  They just waste people's time.

Do you have a solution to get it working with ng-repeat for me?  I would like to sort items, have my model updated with that new order, and then be able to use that new data model and send it back to the server, etc.

Thanks!

[Mike]

I got it working with Angular ng-repeats with the following code:

end: function (e) {
            e.preventDefault();
            $('.dropHint').remove();
            var itemMoved = angular.copy($scope.content[e.oldIndex]);
            $scope.content.splice(e.oldIndex, 1);
            $scope.content.splice(e.newIndex, 0, itemMoved);
            $scope.$apply();
        }

You guys should be able to work something like that into your Angular integration so we can use a datasource attribute.

[sitefinitysteve]

I just encountered this today as well... this should just work, common...

[sitefinitysteve]

For others, I found this works best

<ul class="preferences list-group" kendo-sortable k-placeholder="sortPlaceholder" k-hint="sortHint" k-change="onSortChanged">

//Kendo Drag\Drop
$scope.sortingOptions = {
    axis: "y"
}

$scope.sortPlaceholder = function (element) {
    return element.clone().addClass("placeholder").text("Drop Here...");
};

$scope.sortHint = function (element) {
    return element.clone().css("width", element.width()).addClass("moving hint");
};

$scope.onSortChanged = function (e) {
    arraymove($scope.selectedBlock.locations, e.oldIndex, e.newIndex);
    $scope.dirty = true;
    $scope.$apply();
}

 

function arraymove(arr, fromIndex, toIndex) {
    var element = arr[fromIndex];
    arr.splice(fromIndex, 1);
    arr.splice(toIndex, 0, element);
}