evgenyrodionov/ng-selectize

AngularJS directive for Selectize.js

Angular.js directive for selectize.js. New version based on @kbanman work.

Installation

• Install from bower

    bower install --save ng-selectize
  

• Include styles

    <link rel="stylesheet" href="bower_components/selectize/dist/css/selectize.css">
    <link rel="stylesheet" href="bower_components/selectize/dist/css/selectize.bootstrap3.css">
  

• Include scripts

    <script src="bower_components/selectize/dist/js/standalone/selectize.min.js"></script>
    <script src="bower_components/ng-selectize/ng-selectize.min.js"></script>
  

Usage

Multiple select:

<input type="text" selectize="config" options="suggestions" ng-model="selected" ng-disabled="disabled"/>

Single value:

<select selectize="config" options="suggestions" ng-model="selected" ng-disabled="disabled"></select>

Selectize.js documentation for config.

ng-selectize's Issues

How to remove item from it? and How to change options after updating . I change in array but it doesnot update selectize.

Need new owner

Hi guys, I didn't use ng in production anymore, so maybe someone wants to be owner of this repo?

cc @yakovkhalinsky

closeAfterSelect is broken

When we use multiselect with closeAfterSelect: true option, we have no that effect.
It's OK in version without $timeout

filter available options

I'd like to filter the listed options from ng-selectize. For a "normal" <select> I do it like this:

$scope.objects = [ ... ];
$scope.myFilters = {type:'tv', country:'Austria'};

      <select ng-model="selectedObject" >
          <option ng-repeat="o in objects | filter:myFilters:strict">{{o.name}}</option>
      </select>

Now with ng-selectize I do not have the <option>-tags because they are generated from the variable given in the options attribute

<select selectize="" options="objects" ng-model="selectedObject" ng-disabled="disabled"></select>

Is there a way how I can still do this with ng-selectize?

optgroups not showing

Hey!
I have a problem with adding optgroup functionality. It's not showing when clicking on select. My config looks like this:

$scope.tests = [{id: 1, name: 'one', parent: 'first'}, {id: 2, name: 'two', parent: 'second'}]
$scope.groups =  [{ id: 'dom', name:'test' }]
  $scope.config = {
    valueField: 'id',
    labelField: 'name',
    searchField: ['name'],
    allowEmptyOption: false,
    optgroups: $scope.groups
    optGroupField: 'parent',
    optgroupLabelField: 'name',
    optGroupValueField: 'id',
    plugins: ['optgroup_columns']
  }

And on view:
<select selectize="config" class="form-control" options="tests" ng-model="test"> </select>

Is there a possibility to use ng-options? because it's throwing errors when trying to replace "options".

ng selectize use array as source

How to map string array to ng selectize data. One solution is to add extra mapping like:

var items = data.map(function(x) { return { item: x }; });
$('#input-tags').selectize({
         options: items,
        labelField: "item",
        valueField: "item",
        searchField: ['item']
    });

But I don't want to introduce extra mapping on UI. Is there any better solution to tackle this scenario?

How to use preload option here?

Runs into infinite loop!

When I select an options in a selectize field, my browser is down, because of the infinite loop which is caused by your code.
After 15 minutes of debugging I found out what is happening.
Watch these lines:

// LINE 136
scope.$parent.$watch(attrs.ngModel, setSelectizeValue);
// LINES 28-31
selectize.on('change', function() {
    setModelValue(selectize.getValue());
});

The problem here is that when a selectize changes its value you indicate to run a ng-model's value changing function. In another side of your script you watch the ngModel attribute and on its change you fire selectize's value changing function which causes triggering change event and you know... it loops if it can. I know that it is actually a problem of selectize.js (I WOULD HAVE BEEN HAPPY TO USE SELECT2 INSTEAD OF THIS PLUGIN, BUT PROJECT REQUIRES TO), anyway I am using version 0.10.4 which is one of the latest.
UPD:
I found out that you perform value checks, but it is inside of a timeout and as you may know the function is invoked asynchroniously. My current workaround is removing timeout.
UPD 2:
My fix suggestion:

// REPLACE setSelectizeValue function on line 92 to
function setSelectizeValue(value) {
    var values = parseValues(value);

    if (changing || values === parseValues(selectize.getValue())) {
        return;
    }
    changing = true;

    timeout(function() {
        selectize.setValue(values);
        storeInvalidValues(values, parseValues(selectize.getValue()));

        changing = false;
    });
}

Sorry for my laziness about creating a pull request.

Cannot read property 'value' of undefined

On init multiselect input I got that.
It's setSelectizeOptions(newOptions) where newOptions is undefined.

TypeError: Cannot read property 'value' of undefined
    at a.extend.registerOption (https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.1/js/standalone/selectize.min.js:2:24727)
    at a.extend.addOption (https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.1/js/standalone/selectize.min.js:2:24603)
    at setSelectizeOptions (http://localhost:8003/static/musicbit/js/ng-selectize-0.0.6.js:116:21)
    at angular.module.directive.link (http://localhost:8003/static/musicbit/js/ng-selectize-0.0.6.js:127:36)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.17/angular.min.js:70:222
    at Xc (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.17/angular.min.js:70:279)
    at x (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.17/angular.min.js:59:323)
    at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.17/angular.min.js:51:409)
    at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.17/angular.min.js:51:426)
    at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.17/angular.min.js:51:426) <input type="text" selectize="tagsConfig" options="tagOptions" ng-model="tags" class="ng-pristine ng-untouched ng-valid ng-isolate-scope selectized" tabindex="-1" value="" style="display: none;">
angular.js:11707TypeError: Cannot read property 'value' of undefined
    at a.extend.registerOption (selectize.min.js:2)
    at a.extend.addOption (selectize.min.js:2)
    at Object.setSelectizeOptions (ng-selectize-0.0.6.js:116)
    at Object.ng.config.$provide.decorator.$delegate.__proto__.$watch.applyFunction [as fn] (<anonymous>:778:50)
    at m.$get.m.$digest (angular.js:14397)
    at m.ng.config.$provide.decorator.$delegate.__proto__.$digest (<anonymous>:844:31)
    at m.$get.m.$apply (angular.js:14660)
    at m.ng.config.$provide.decorator.$delegate.__proto__.$apply (<anonymous>:855:30)
    at angular.js:1458
    at Object.e [as invoke] (angular.js:4219)

ng selectize not working with angular 1.7.5

I using AngularJS lasted version(1.7.5). I try implement ng selectize but i have problem:

auto clear become {"value":null} on change select.

Please help me...

$digest error

Hi author & others,

I got "Error: [$rootScope:inprog] http://errors.angularjs.org/1.4.0-rc.2/$rootScope/inprog?p0=%24digest" after selected an option.

HTML:

<select selectize="selectizeProducts" options="products" ng-model="product_id"></select>

AngularJs:

$scope.products = [];

$http.get('/product/get_list').success(function(data, status, headers, config) {
    $scope.products = data;
});
$scope.selectizeProducts = {
        valueField: 'id',
        labelField: 'name',
        searchField: 'name',
        placeholder: "Please select...",
        onChange: function(id) {
            getProductInfo(id);
        }
    };