angular-selectize

by machineboy2045

machineboy2045 / angular-selectize

angular-selectize

201 Stars 124 Forks Last release: about 5 years ago (v3.0.1) MIT License 141 Commits 33 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

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.