machineboy2045 / angular-selectize Goto Github PK

Hi,

I noticed that you are watching for model value changes and running refreshSelectize in every value change. Running this in IE11 with 200 options (countries) and about 10-15 selections runs the browser to the ground (it literally crashes after a while).
Here is a plunk fork demonstrating the issue. Try adding more than 7-10 countries in the selection (it happens with much less values if you add and remove a few times, but just making it more obvious this way)

http://plnkr.co/edit/N0uTQ18NW4v6bdV8K9HZ

In the current release onBlur and onFocus are not working for me. Building your latest changes fixed the problem and I'm just wondering when those changes will be available via Bower?

Is there an event listener for on input into the text field? I would like to capture the currently unselected text every time the user types something.

Similar to this in jQuery:

$(".selectize-input_1").on('input', function() {
    var current_text = $(".selectize-input").val();
    $.get("/autocomplete", current_text, function(options) {
         // Set new autocomplete options for selectize
    });
})

Hello,

Is it possible to apply a filter to the angular selective options?

Thank You,
Miguel

If I have selected value loaded before options list, module doesn't select my value in new options list :(
My code loads product(with .brand_id), but brands list is being loaded after it .. so I have select with right options, but without selected one

ty for plugin, still works better then other ones! Especially after latest updates :)

onOptionAdd gets triggered for every option every time a new option is added

First of all thanks for this great angular module.
i get an issue when binding options to a scope variable that is populated with an ajax call to an api,
it doesn't bind , any suggestions ?

selectizeConfig , the global default, will always override redefined properties of the options passed to the directive becuase of angular.extend. It seems to me that it should be the other way around; the developer should be able to override properties of the default configuration per instances.

Hi,

i have tried to use the angular-selectize js, i have included selectize, angular, jquery plugins , and i get error as,
TypeError: undefined is not a function
in following line
102: element.selectize(config);

following is my usages

""

    $scope.projSelectConfig = {
        create: false,
        valueField: "key",
        labelField: "name",
        placeholder: 'Select a Project',
        maxItems: 1,
        closeAfterSelect: true,
        onInitialize: function(selectize) {
            console.log('Initialized',selectize);
        }
    };

but it works when i change
element.selectize(config) to $(element).selectize(config)

which also make senses, since in selectize documentation, declaration is made on jquery element.
also am not sure how it works fine in your plunker example.

am i doing something wrong, please explain
Thanks!

How to do this:

<script>
 $('.select-group').selectize({
    create: false,
    sortField: {
      field: 'text',
      direction: 'asc'
    },
    dropdownParent: 'body'
  });
// the angular things etc.
var myApp = angular.module('myApp',['selectize']);
// listing of db items i want in select-form-thing
$http.get('dbs').success(function(dbs) {
   $scope.dbs = dbs;
});
</script>
// Not it's, but that's not working with selectize as class
<select class="select-group" ng-model="foo.db_id">
   <option ng-repeat="db in dbs"  value="{[ db.id ]}">
       {[ db.name ]}
    </option>
</select>
// But it should be something like:
<selectize config="selectizeConfig" class="select-group" ng-model="foo.db_id">
</selectize>
<script>
$scope.selectizeConfig = {
        create: false,
        valueField: 'id',
        labelField: 'title',
        //delimiter: '|',
        onInitialize: function(selectize){
        // receives the selectize object as an argument
        },
        maxItems: 1
    }
</script>

But how to add the ng-repeat?

First, fantastic code. And thank you very much for posting this publicly. I'm working to incorporate this into a project. Hopefully, you've got time to check this out, and at least point me in the right direction to fix this.

Here's the issue: When use a selectize widget in tag mode, the first tag is added correctly, but subsequent tags not added separately, but concatenated into the value of the original tag. I'm too new to AngularJS directives to make a patch for this, but I can at least document what I'm seeing in my environment:

Javascript Controller

$scope.contacts = contacts;         
$scope.emailConfig = 
{
    create:true,
    valueField: 'contactId',
    labelField: 'name',
    maxItems: 100
};

HTML View

<input selectize="emailConfig" options="contacts" type="text" class="form-control" ng-model="emailList">

Screenshots:

1. The first tag works great: (yay!)

2. But the second tag doesn't :(

3. And turns ugly with values instead of labels

Here, I'm using values for each record instead of names (valueField:'contactId'). The problem is really apparent when I do this:

Maybe it's worth to change $watch to $watchCollection at this line:
https://github.com/machineboy2045/angular-selectize/blob/master/dist/selectize.js#L113

This way selectize will be picking up changes made to the model externally. I needed that functionality and it solved my problem.

$scope.options = [];
$scope.singleConfig = {
    options: $scope.options,
    maxItems: 1,
    sortField: 'text'
};

// later...
$scope.options = [{value: 'id1", text: 'A'}, {value: 'id2', text: 'B'}];

This will still display an empty select when the options get updated later. Does two-way binding not work for single selects?

Using angular-selectize2 v1.2.1

is there a way to do min items just as i would do max items?

Setting an onChange config option has no effect.

Could be fixed by adding a line to selectize.js config.onChange:

      config.onChange = function(value){
        if( !angular.equals(selectize.items, scope.ngModel) )
          scope.$evalAsync(function(){
            var value = angular.copy(selectize.items);
            if (config.maxItems == 1) {
              value = value[0]
            }
            modelCtrl.$setViewValue( value );
          });
        scope.config.onChange(value);
      }

For some reason my onChange function now gets called twice. Better than not at all though....

On Android, when the selector is touched, the keyboard input appears. I suspect this is because the generated input is of type="text"

            <selectize  ng-model="filters.min_bedrooms" 
                        options="[
                                {title:'0', id:0},
                                {title:'1', id:1},
                                {title:'2', id:2},
                                ]">
            </selectize>

Generates:

    <input type="text" autocomplete="off" tabindex="" style="width: 4px; opacity: 0; position: absolute; left: -10000px;">

Hi,

I'd like to add a link to each rendered item to remove it from the selected list. Is there a way to do this?

Thank you!

I looked through the code and could not find an option to create a single selection "selectized" input like the one in the examples "City / State Selection" or "Single Item Select" under http://brianreavis.github.io/selectize.js/

Maybe I am missing something?

Cheers

How can I extend angular-selectize to update the selected items when I change the model?

$scope.myModel = ["Tag1", "Tag2"];
<selectize options='myOptions' ng-model="myModel"></selectize>
$scope.myModel = ["Tag1", "Tag2", "Tag3"];

Results in only Tag1, Tag2 showing.

Hey there,
great work! took me a while to find your directive when searching for angular selectize as other more incomplete directives came first in google.

Anyhow, on to the problem. I am currently using chosen as a select replacement, but want to move to selectize for various reasons. Most of my option data sources are hashsets rather than arrays of objects so I am using the following notation:

ng-options="country.iso as country.name group by country.continent for (key, country) in vm.lookups.countries"

countries lookups looks like:

{
   GB: {iso:'GB', name: 'United Kingdom', continent: 'Europe'},
   IT: {iso:'IT', name: 'Italy', continent: 'Europe'}
}

I tried playing around with the plnkr you have posted but could not get selectize to work with ng-options. Any idea why the above is not working and what should be done to support it?

When setting a placeholder as a string, everything work as expected but when setting a placeholder using a scoped variable, the placeholder is evaluated for the select DOM element but not for the input DOM element. Please see the demo on the single select scenario here http://plnkr.co/edit/QZTxGG?p=preview

Output here http://d.pr/i/aoc8

Continuing from #47

Adding an item to the model used for options in Selectize does not change the options.

JS

$scope.people = [{id: 1, name: "Don"}, {id: 2, name: "John"}];

$scope.myConfig = {
    options: $scope.people,
    valueField: 'id',
    labelField: 'name',
    create: true,
    sortField: 'text',
    maxItems: 1
  }

$scope.addPerson = function(){
  $scope.people.push({ id: 3, name: "Melissa" });
}

HTML

<selectize ng-model="person" config="myConfig" placeholder='Select a person...'></selectize>

<button ng-click="addPerson()">Add Melissa</button>

$watch has been updated to $watchCollection in my version.

Hi there again,

testing the limits of your directive once more I run into some trouble when using it inside another directive. It seems that scope.$eval returns undefined.
Take a look here to see what I mean.

http://plnkr.co/edit/N0uTQ18NW4v6bdV8K9HZ?p=preview

The $watch on scope.options inside of onInitialize wasn't firing for me.

Line 106
        scope.$watch('options', function(){
          selectize.clearOptions();
          selectize.addOption(scope.options)
          selectize.setValue(scope.ngModel)
        }, true);

I believe it was because the reference $scope.options in my controller was being overwritten from within angular-selectize here:

Line 92 
scope.options = generateOptions( (scope.options || config.options || scope.ngModel).slice() );

I'm going to submit a pull-request with the changes that worked for me - would like to know what you think. Thanks again for this clean directive, Cheers!

I have a couple of cases where the options I want to use are wrapped in an object, instead of an array.
This line breaks it, though:

data = angular.isArray(data) ? data : [data]

Can you allow objects by changing it to:

data = angular.isArray(data) || angular.isObject(data) ? data : [data]

Hello,

I have the following select:

    <select data-ng-model="subscriber.country" name="country" data-selectize="model.countries">
        <option value="">Country</option>
        <option value="1">US</option>
        <option value="2">UK</option>
    </select>

When I submit this form the subscriber.country value is always an Array even if I set the maximum number of items equal to 1, e.g., a drop down list.

Shouldn't you be passing simply an item in this case an not an array?

Thank You,
Miguel

After the selectize input has been touched by the user (and a blur event triggered for the first time), it should be given the ng-touched css class and form.field.$touched should be set to true.

I've currently hacked this in using onblur, but would be great if it was fixed properly :)

Hello,

I have the following HTML:

<select data-ng-model="model.message.property" name="property" data-selectize data-config="model.properties" data-options="model.properties.options"></select>

And on my controller I have the following:

$scope.model = {
  message: {
    property: ''
  },
  properties: {
    maxItems: 1,
    options: ['Villa', 'Appartment', 'Comercial', 'Land'],      
    persist: false
  }
}

Everything seems to work fine ...

However, when I select an option I get the following error:
Error: [$rootScope:inprog] $digest already in progress

Does anyone has any idea what might be wrong?

Thank You,
Miguel

This wrapper takes either the value of the options attribute, or the options configuration (or the ngModel options otherwise) and adds them to Selectize via the addOption() API.

This is not a good behavior: Selectize itself treats the options configuration in a special way, using registerOption() instead, so these are base options that cannot be deleted.
Only the options really added by the user can be deleted, the others are just unselected and added back to the option list.

angular-selectize should use registerOption() too to initialize the component.

How works with dynamic options? http://plnkr.co/edit/05fprI?p=preview

like plugins: ['remove_button'] for example?

Hi. I can't see it in code but is there a way to access selectize instance so I could use selectize events & api? For example I'd like to do open().

Hello,

Is it possible to use angular selective without the selective tag since I think this create problems with validation?

Thank you,
Miguel

I'm attempting to do some $dirty logic on my form. It looks like angular is marking the selectize as dirty even though I've not interacted with it yet.

Here is the output from my page after a fresh page load.

<selectize value="WEB_APP" style="display: none;" tabindex="-1" class="ng-untouched ng-valid ng-isolate-scope selectized ng-dirty ng-valid-parse ng-valid-required" config="appTypeConfig" ng-model="app.settings.type"></selectize>

Here is the config from my controller. The LookupService returns a JSON array of text, value pairs.

            $scope.appTypeConfig = {
                options: LookupService.getWithKey('app_types_en_US'),
                maxItems: 1,
                highlight: false
            };

When I try the example of the "advanced" section of the readme, I cannot search the options. As soon as I type a letter, I've got no results. There must be a problem with the valueField and labelField? It's like it's trying to search the objects as if they were strings.

So when the page loads I have this:

<h4>{{ distributorinvoice.distributor }}</h4>
<div id="distributor-select" selectize="config" options='distributorOptions' ng-model="distributorinvoice.distributor"></div>

distributorinvoice is undefined so I assume angular creates it and then another property called distributor. I assume then angular-selectize binds to this implicitly created property.

Now I do an AJAX call and it updates the object distributorinvoice (which has a property called distributor). The text in the h4 tag works (which is kinda amazing). However what is selected in the dropdown is still empty.

I guess I can solve this via a resolve but I rather have it dynamically rebind to the new thing.

Is this possible?

it would be nice to add optgroups to selectize like this

<selectize config='myConfig' options='myOptions' optgroups='myOptgroups' ng-model="myModel"></selectize>

I tried to add them trough config manualy like this and it works but

$scope.optLis= [
            {id: 1, title: 'Game of Thrones'},
            {id: 2, title: 'Bird'},
            {id: 3, title: 'Reptile'}
        ];

$scope.myConfig = {
            optgroupField: 'parent_id',
            optgroupLabelField: 'title',
            optgroupValueField: 'id',
            optgroups: $scope.optList,
            valueField: 'id',
            labelField: 'title',
            searchField: 'title',
            placeholder: 'Select Parent Category',
            maxItems: 1,
            preload: true
        };

when I try to load optgroups in myConfig from database with json request by adding optgroups: $scope.roots it doesnt work

 $scope.roots = function(){
            return {
                get : function() {
                    return $http.get('/roots');
                }
            }
};

I guess problem with this is preloading of roots inside angularjs becouse when i add myOptions to selectize tag from json they get loaded but optgroups didnt load inside angular so there is nothing

When using just the Selectize JS library, you can get an instance of the component by doing this:

// initialize the selectize control
var $select = $('select').selectize(options);

// fetch the instance
var selectize = $select[0].selectize;

With angular-selectize, how can we get an instance of the component?

I'd like to call instance methods on it (e.g. refreshOptions()), but I need an instance of it first.

Hello,

I have the following using a normal select and Angular Validation:

<select model="subscriber.country" data-validator="required">
    <option value="">Country</option>
    <option value="1">US</option>
    <option value="1">UK</option>
</select>

This works fine ... If I add selectize it will not work until I remove data-validator.

Any idea why?

Thank You,
Miguel

Hi, i want to set a init dynamic Value (based on Ajax call) but setValue('myvalue') is not working, any idea?

What's going on with the 0.5.1 release? It has a commit, 630c293, that's not on the master branch. And when I use v0.5.1, I get a bunch of $digest already in progress errors.

Not sure how this release got bundled, but something seems awry...

Hi! Thanks for the module again!

So I have a Movie model that has _id, name, rating, etc.
When I have some pre-populated values i.e.

vm.selectedMovies = [{_id: '1', name: 'Bang'}, {_id: '2', name: 'Whatevs'}];

the selectize appears empty (i.e. the model binding does not seem to evaluate). I tried even preloading the collection from the server (to have all options available) but with no luck. My config options are as follows:

vm.movieSelectConfig = {
  valueField: '_id',
  labelField: 'name',
  searchField: 'name',
  sortField: 'name',
  // create: true,
  hideSelected: false,
  closeAfterSelect: true,
  preload: true,
  render: {
    option: function(movie) {
      return '<div class="selectOption">' + movie.name + '</div>';
    }
  },
  load: function(query, callback) {
    // if (!query.length) {
    //   return callback();
    // }
    return Movie.searchByName({
      'name': query
    }).$promise.then(function(results) {
      callback(results);
    });
  }
};

Any hints?

The way to get select div is not working anymore.

// initialize the selectize control
var $select = $('select').selectize(options);

// fetch the instance
var selectize = $select[0].selectize;

It seems like there is no 'select' divs available.

Help please

I need to use the select input's selected item's text for validation. So, I can use this either by storing both text/value in the ng-model or get the text of the select input via api call or something like getText()

When setting $scope.config.create to false on your example-plunker the Add ... behavior is still working. Can you please check on this?

Hello,

I used the following code to set some global configuration:

angular.module('Application').value('selectizeConfig', {
  persist: false  
});

But persist = false is not taken effect on my selectizes unless I set the config in the selectize itself.

Any idea why?

Thank You

Consider a page with two selectize tag fields, created by passing the same list of options and allowing for options to be created...

1. Create a tag in the first selectize input.
2. Go to the second selectize input and start typing the same tag

I would expect the option to autocomplete in the second input, but it does not. The first input added the new option to selectize but that binding is not two-way. I believe that addAngularOption should also add the new option to the original list of options that were passed in.

For this to happen cleanly, I think you'll need to create an isolate scope which sounds like a good idea regardless.

Hi and thanks for a great directive :)
I would like to wrap it in another directive so that I can pass for example different classes and options to be assigned. When I try to add a class using ng-class="classValue" it is only applied to the parent element. Any idea how to go about this?

restrict : 'A',
template : '<div class="Autocomplete" ng-class=\"classValue\" selectize="config" options="myOptions" ng-model="myModel"></div>',