Selectize & AngularJS not playing along with Select box (Multiple options)

Question

I've been trying to implement Selectize with AngularJS (1.2.4). I'm using this directive to interface with the plugin and everything is working smoothly until now. When using the ngModel from a normal select box It works fine, and returns the expected object but when I try to use it with the multiple attribute, it won't set the model.

I've inspected the DOM and appears the script removes unselected options from the hidden select and that might be messing with the angular binding.

I've created a Plunkr to demonstrate the behaviour.

http://plnkr.co/It6C2EPFHTMWOifoYEYA

Thanks

You're going to need far more than a one-liner in your directive to stitch this jQuery plugin together with Angular.JS. You need to explicitly handle the "change" event triggered by Selectize, so that it can inform Angular.JS what just happened. — jokeyrhyme
– jokeyrhyme, Commented Jun 7, 2014 at 9:07
When you look at the plunker example for selectize.js there are two states. 1) "$scope.options" [does not change] 2) selectizeModel [transient]. In your case you have only one state hence the effect of it being removed. — karuthan
– karuthan, Commented Jun 10, 2014 at 22:30
Is this an exercise? If not, why re-invent the wheel? Use github.com/angular-ui/ui-select — Jonathan Wilson
– Jonathan Wilson, Commented Jun 24, 2014 at 20:33
Try this repo : github.com/machineboy2045/angular-selectize I am using it and its working by default. — Gaurav Gandhi
– Gaurav Gandhi, Commented Jul 31, 2015 at 3:52

Jonathan Wilson · Accepted Answer · 2014-07-01 17:34:40Z

As mentioned in the comments above, your directive must listen to changes in the selectize plugin and then inform angular of what happened via ng-model.

First, your directive needs to ask for an optional reference to the ngModel controller with the following:

require: '?ngModel'.

It is injected into your link function as an argument in the 4th position:

function(scope,element,attrs,ngModel){}

Then, you must listen for changes in selectize with $(element).selectize().on('change',callback)

and inform ngModel with ngModel.$setViewValue(value)

Here is a modified version of your directive. It should get you started.

angular.module('angular-selectize').directive('selectize', function($timeout) {
    return {
        // Restrict it to be an attribute in this case
        restrict: 'A',
        // optionally hook-in to ngModel's API 
        require: '?ngModel',
        // responsible for registering DOM listeners as well as updating the DOM
        link: function(scope, element, attrs, ngModel) {
            var $element;
            $timeout(function() {
                $element = $(element).selectize(scope.$eval(attrs.selectize));
                if(!ngModel){ return; }//below this we interact with ngModel's controller
                //update ngModel when selectize changes
                $(element).selectize().on('change',function(){
                    scope.$apply(function(){
                        var newValue = $(element).selectize().val();
                        console.log('change:',newValue);                    
                        ngModel.$setViewValue(newValue);
                    });
                });
            });
        }
    };
});

Also:

Collectives™ on Stack Overflow

Selectize & AngularJS not playing along with Select box (Multiple options)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related