UI-Sortable with Angular filter for ng-repeat

Question

It seems that the UI-sortable (https://github.com/angular-ui/ui-sortable) plug in does not play well if there is a filter in the list that is being ng-repeated by angular. The drag and drops do not work as intended.

This is shown by these two fiddles:

First: Has filter - the drag and drop will not stay in place.

http://jsfiddle.net/Lvc0u55v/2886/

HTML:

<div ng-controller="Controller">
  <ul ui-sortable="sortableOptions" id="test" ng-model="items">
    <li class="line" ng-repeat="item in items | filter: myFilter">        
        {{item.name}}
    </li>
  </ul>
</div>

JS:

var myApp = angular.module('myApp',['ui.sortable']);

myApp.controller('Controller', ['$scope', function($scope) {
    $scope.name = 'Superhero';
    $scope.items = [
        {name: 'TEST'},
        {name: 'TEST2'}, 
        {name: 'TEST3'}, 
        {name: 'TEST4'},
        {name: 'TEST5'},
        {name: 'TEST6'},
        {name: 'TEST7'},
        {name: 'TEST8'}
    ]

    $scope.myFilter = function (item) { 
        return item.name !== 'TEST';
    };
    $scope.sortableOptions = {
        opacity: '0.8',
        axis: 'y',
        tolerance: 'pointer',
    }
}]);

Second: Has no filter - works as intended.

JS SAME,

HTML:

<div ng-controller="Controller">
  <ul ui-sortable="sortableOptions" id="test" ng-model="items">
    <li class="line" ng-repeat="item in items">
      {{item.name}}
    </li>
  </ul>
</div>

http://jsfiddle.net/Lvc0u55v/2887/

I will create an issue on their github repo as well, but if anyone has a work around that would be great!

Cyril Gandon · Accepted Answer · 2016-04-22 15:38:58Z

1

In the docs you can see

Filters that manipulate the model (like filter, orderBy, limitTo,...) should be applied in the controller instead of the ng-repeat (refer to the provided examples).
This is the preferred way since it:
- is performance wise better
- reduces the chance of code duplication
- is suggested by the angularJS team
- it does not break the matching of the generated DOM elements and the ng-model's items

So yeah, don't do filtering in the view, it is not intended to work with ui-sortable.

For example:

JS:

 $scope.filtered= $filter('filter')($scope.items, $scope.myFilter);

HTML:

<li class="line" ng-repeat="item in filtered">        
    {{item.name}}
</li>

answered Apr 22, 2016 at 15:38

Cyril Gandon

17.1k15 gold badges84 silver badges124 bronze badges

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

1 Comment

Citrullin Over a year ago

But: Don't forget that this solution will delete the items in your array. You can use one scope array and one javascript array. The original data are in your javascript array.

Ajanthan Mani · Accepted Answer · 2016-04-22 15:39:18Z

0

you are passing an array in ng-model.

ngModel directory works like just another attribute like id which is accessible by angular.

and ngModel is mostly used in the tags which produces data, like input, textarea, select and other custom directives.

simply instead of accessing the data from id by using the general DOM identification like

$scope.variable = document.getElementById('someElement').value

angular uses ngModel directive to bind the data in both ways.

answered Apr 22, 2016 at 15:39

Ajanthan Mani

5094 silver badges14 bronze badges

Collectives™ on Stack Overflow

UI-Sortable with Angular filter for ng-repeat

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related