-1

I have been cracking my head on this particular issue and I just can't seem to find the solution for it.

Basically, what I'm trying to achieve is to have a select list (select[multiple]) and bind an array to it with values. But as the list grows, I'm adding a filter to it so I don't have to scroll and search individually.

But by doing so, my model (array) is being cleared or more likely, all the values that are stored in there are being dropped except those that are results of the filtering.

Anyone have any idea how to tackle this particular issue?

To simulate the issue, select multiple items and filter on one item in particular. Clear the filter and the model is cleared.

Directive code

angular
.module("multiselect", [])
.directive("multiselect", [function() {
    return {
    template:   '<div>' +
                '       <input type="text" data-ng-model="filter" placeholder="filter"/>' +
                '       <select multiple="multiple" data-ng-model="selection" data-ng-options="item.value as item.label for item in items | filter: filter"/>' +
                '</div>',
    link: function(scope, elem, attr) {
        scope.selection = [];
        scope.items = [
        { label: 'Item 1', value: 1 },
        { label: 'Item 2', value: 2 },
        { label: 'Item 3', value: 3 },
        { label: 'Item 4', value: 4 },
        { label: 'Item 5', value: 5 },
      ];
    }
  }
}]);

HTML

<div ng-app="multiselect">
  <multiselect></multiselect>
</div>

Example > fiddle

Jorrex
  • 1,503
  • 3
  • 13
  • 32

1 Answers1

0

Take a look at ui-select for angular js. you can set it to multiple select and it accepts custom filtering as in this post. Hope this helps. Good luck

Thabo Ketlhaetse
  • 58
  • 12
  • Sure looks promising, but I ended up writing my own directive to fix my issue. I'll mark your answer as the correct one, since it shows the most promise in this sort of situation. It is the closest thing to what I was searching! – Jorrex Aug 07 '17 at 12:56