Need help with angular-selectize?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

machineboy2045
201 Stars 125 Forks MIT License 141 Commits 72 Opened issues

Description

angular-selectize

Services available

!
?

Need anything else?

Contributors list

angular-selectize

selectize5

Demo

Try the Demo on Plunker

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:

html





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 };

Differences in Angular version

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

More Documentation

Config

Inline


Global

To define global defaults, you can configure the

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.