Order issues with filter.

[liamgiles]

Hey,

There seems to be an ordering issue when dragging filtered items.

Take a look here: http://plnkr.co/edit/tcubluWrHRY6uZHccKrW?p=preview

If you search for "result", then drag one of them to the other list that contains only 'item', the dragged item becomes duplicated.

If you move the second filtered item, it duplicates, then it also removes the item in first position. (e.g moving "item result 2" removes "item result 1" when being moved to the other list.

In previous versions, this worked, it moved an item not duplicated. It's also worth noting that it seems that the item being dragged is from the scope array, not the filter.

[blaskovicz]

I'm having a similar issue where filtering the items and then dragging one from a filtered list picks the wrong item. Perhaps a workaround is to sort/filter the model in the controller instead of the view.

[blaskovicz]

My suggestion seemed to work.

I have a seperate model, filteredItems, that I keep update to date by doing a $filter('filter', originalItems, searchTerm) from a $scope.$watch() on both originalItems (deep watch) and searchTerm. In my sortableListener.itemMoved() function, I actually add the new item to the "real" model of the destination list so that its filtered items will be updated as well (and thus be displayed in the view) event.dest.sortableScope.originalItems.push(event.source.itemScope.modelValue).

[ibsenleo]

Same here. Seems like into the filter function, the plugin is handling the temporal array that keeps the filtered values and the original array remains the same. Some suggest?

[tbthiago]

@blaskovicz Can you post the code that solved this issue?

[KammererTob]

The suggestion @blaskovicz is mentioning is indeed working. I was also able to locate the "source" of the problem inside the directive itself, but was unable to solve it (mostly because of my lack of knowledge about angular directives and the structure of the directive). I believe the root cause is located here:

Line 1129 to 1135:

if (ngModelController) {
     ngModelController.$render = function () {
          scope.modelValue = ngModelController.$modelValue;
     };
} else {
     scope.modelValue = sortableController.scope.modelValue[scope.$index];
}

Since the ngModelController is not defined most of the time it uses the $indexof the current scope to access the right object inside the modelValue array. I believe that this is a problem related to something explained here: http://codeutopia.net/blog/2014/11/10/angularjs-best-practices-avoid-using-ng-repeats-index/comment-page-1/

@tbthiago My quick solution was to filter inside my controller instead of the view. To be able to do that i defined two models (one unfiltered and one filtered):

  $scope.moves = [];
  $scope.filteredMoves = [];

Now i use the ng-change directive provided by angular-js to be able to filter the movesmodel according to the text put in like this:

<input class="form-control" ng-model="moveFilter" ng-change="applyFilter()" placeholder="Search" type="text"/>

  $scope.applyFilter = function() {
    $scope.filteredMoves = $filter('filter')($scope.moves, {text: $scope.moveFilter});
  };

In multiple quick tests this seem to have resolved the problem of selecting the wrong item while being filtered.

[tbthiago]

Thank you for your help @KammererTob. It was very clarifying. But actually, I don't think this issue is in filter itself. I believe it's because the items are cloned when moved to another list, even if this option is not set true. Someway, the plugin loses the corrects indexes. I am newby in Angular, probably I am not capable to solve this. I am trying to understand the code, but it's really hard for me. Thank you very much