angular-selectize
###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
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/selectize.js"></script>
Add the selectize module as a dependency to your application module:
var myAppModule = angular.module('MyApp', ['selectize']);
Basic Usage
Setup your controller variables:
$scope.myModel;
$scope.myOptions = ['Spectrometer', 'Star Chart', 'Laser Pointer'];
Add the selectize element to your view template:
<selectize options='myOptions' ng-model="myModel"></selectize>
Advanced 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){
},
};
<selectize config='myConfig' options='myOptions' ng-model="myModel"></selectize>
##Documentation
##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: '|'
});