0.1.7 • Published 8 years ago
angular-selectizejs v0.1.7
angular-selectizejs
Component for using AngularJS with Selectize.js.
Install
Using Bower
$ bower install angular-selectizejs
Using NPM
$ npm install angular-selectizejs
Add the module dependency
angular.module('myApp', ['selectize']);
Import the dependencies
It's important to import jquery script before angular.
<script src="jquery.js"></script>
<script src="selectize.js"></script>
<script src="angular.js"></script>
<script src="angular-selectize.js"></script>
Usage
Single Mode
<select selectize="userSelectize" config="userConfig" options="user_options()" ng-model="user.id"></select>
Multiple Mode
<input type="text" selectize="tagsSelectize" config="tagsConfig" options="tags_options()" ng-model="tags" />
Config
$scope.userConfig = {
persist: false,
selectOnTab: true,
labelField: 'name',
valueField: 'id',
sortField: 'name',
searchField: 'name'
};
Options
$scope.user_options = function() {
return [
{id: 1, name: 'The user 1'},
{id: 2, name: 'The user 2'},
{id: 3, name: 'The user 3'}
];
};
or
$scope.user_options = function() {
return $http({method: 'GET', url: 'your-endpoint'});
};
or
$scope.user_options = function() {
return $resource('your-endpoint').query();
};
Using your selectize instance
The value of the 'selectize' attribute is the reference to use selectize instance in your controller.
$scope.userSelectize('clearOptions');
$scope.userSelectize('addOption', newOptions);