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 123 Forks MIT License 141 Commits 72 Opened issues

Description

angular-selectize

Services available

!
?

Need anything else?

Contributors list

# 736,325
98 commits
# 105,329
mapbox-...
vector-...
Svelte
Gulp
2 commits
# 533,142
Ruby
Shell
2 commits
# 429,201
CSS
HTML
Shell
vuejs
1 commit
# 26,730
Shell
Rust
api-tes...
curl
1 commit
# 766,841
1 commit
# 307,750
JavaScr...
1 commit
N/A
1 commit
N/A
1 commit
# 21,879
Rails
rubygem
rspec
iterm2
1 commit
# 776,149
1 commit
# 376,956
React
ramda
pandas
reactjs
1 commit
# 109,763
atom-pl...
TypeScr...
React
Redux
1 commit
# 736,324
1 commit
# 99,375
Less
tagging
Node.js
TeX
1 commit

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.