CODEWITHSUNDEEP
angularjsjquery-select2
Ronald
Ronald

Reputation: 33

Select2 not binding

I'm trying to use Select2 with my angular app, but I'm having trouble binding. There is a model with an array of Ids, to which I bind. When using the default (without Select2) it works fine, but as soon as I use select2, I lose the binding.

I've added the pre-section to display the cultureIds. As you can see, it doesn't update. When you don't call the .select2() function, it does bind properly.

I have tried doing an ng-repeat in an option tag as well, but with the same result.

Below the HTML which causes the problem:

<select class="Select2"
        ng-model="region.cultureIds"
        multiple="multiple"
        ng-options="culture.id as culture.displayName for culture in cultures">
</select>
<pre>{{region.cultureIds | json}}</pre>

I've included a jsFiddle to demonstrate my issue. http://jsfiddle.net/gymagmor/

Upvotes: 1

Views: 1270

Answers (2)

Ronald
Ronald

Reputation: 33

As suggested by buh-buh I was able to fix this by binding to the "select2:selecting" event, process the data, and then trigger a digest.

Upvotes: 0

pegla
pegla

Reputation: 1866

Sorry I won't answer this question, but I would like to advise against using jquery select2 and to go with native angular version.

Reason being you are writing AngularJS application and you should try doing things angularjs way, not JQuery way - so less DOM manipulation.

Check this, best ui-select for angularjs, I've been using it on multiple projects and it's great:

https://github.com/angular-ui/ui-select

This way you would keep everything on controller and/or scope and without any DOM manipulation you will be able to use values from select - it supports multiselect as well.

And while we're at recommending stuff, check this one, it's Todd Motto AngularJS style guideline, de facto best AngularJS guidelines online (and plus it will prepare you a bit for Angular):

https://github.com/toddmotto/angularjs-styleguide

Upvotes: 0

Related Questions