angular-selectize

Demo

Features

This is an Angular.js directive for Brian Reavis's selectize jQuery plugin. It supports all of Selectize's features. Here are some highlights:

Better performance than UI-Select (ui-select vs angular-selectize)
Selectize is ~7kb (gzipped)
Smart Ranking / Multi-Property Searching & Sorting
Angular Models & Bindings
Skinnable
Keyboard support

Upgrading to version 3.x.x

Previous versions supported simple arrays for options ['Option 1', 'Option 2']. Version 3.0 drops this in order to simplify the directive and make it more consistent with the original Selectize.

Also note the main js file has been renamed from 'selectize.js' to 'angular-selectize.js'.

Dependencies

Install

Install with Bower

$ bower install angular-selectize2

Load the script files in your application:

<link rel="stylesheet" href="bower_components/selectize/dist/css/selectize.default.css ">
<script type="text/javascript" src="bower_components/jquery/jquery.js"></script>
<script type="text/javascript" src="bower_components/selectize/dist/js/standalone/selectize.min.js"></script>
<script type="text/javascript" src="bower_components/angular/angular.js"></script>
<script type="text/javascript" src="bower_components/angular-selectize2/dist/angular-selectize.js"></script>

Add the selectize module as a dependency to your application module:

var myAppModule = angular.module('MyApp', ['selectize']);

Usage

$scope.myModel = 1;

$scope.myOptions = [
  {id: 1, title: 'Spectrometer'},
  {id: 2, title: 'Star Chart'},
  {id: 3, title: 'Laser Pointer'}
];

$scope.myConfig = {
  create: true,
  valueField: 'id',
  labelField: 'title',
  delimiter: '|',
  placeholder: 'Pick something',
  onInitialize: function(selectize){
    // receives the selectize object as an argument
  },
  // maxItems: 1
};

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

Differences in Angular version

Please note in the example that, unlike the original Selectize, options should NOT be passed in the config object.

Config

Inline

<selectize config="{create:true, maxItems:10}" options='myOptions' ng-model="myModel"></selectize>

Global

To define global defaults, you can configure the selectize injectable:

MyApp.value('selectizeConfig', {
  delimiter: '|'
});

valllabh/angular-selectize