1

I'm developing a web application using Angular 6. I used the library bootstrap-select to implement a combo-box (with additional possibilities to customize). I have a problem: when I set the multiple attribute, graphically the behavior is right (all the selected strings appear inside the input box, together). The problem is that the value connected with my ngModel (used to get the data with 2-way binding) it's always only one (and always corresponds to the first value displayed inside the box, although there are other values in it!). This is the code:

<select
   class="form-control selectpicker show-tick"
   data-width="200px"
   multiple
   title="my_title"
   name = "name"
   [(ngModel)] = "value"
   (ngModelChange) = "onChange($event)"
>
    <option value="1">Value 1</option>
    <option value="2">Value 2</option>
    <option value="2">Value 3</option>

</select>

This is the result (graphically it's exactly as I would like):

enter image description here

But, as you can see, with each click to add a new value, the value object is always and only associated with 1 (because Value 1 is the first in the list and doesn't seem to matter that the other two values are present). The console log (object value):

enter image description here

How can I solve this problem?

Jonathan Hall
  • 75,165
  • 16
  • 143
  • 189
claudioz
  • 1,121
  • 4
  • 14
  • 25

1 Answers1

0

The problem is that you are using a multi select version for jquery. You could do some tricks to make it work, but it will not be quite elegant

Also why use jquery in angular? You always have to try to avoid it

Angular handles the bindings in another way.

I recommend you use this library ng-select

Demo

GonzaH
  • 347
  • 2
  • 12
  • Could you give me an example of "not quite elegant trick"? If you can, I would be grateful (in the project I'm doing I can not use different libraries unfortunately!) – claudioz Dec 07 '18 at 15:03