├── bower.json ├── CHANGELOG.md ├── package.json ├── LICENSE ├── README.md └── dist └── angular-selectize.js /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-selectize2", 3 | "version": "3.0.2", 4 | "main" : [ 5 | "./dist/angular-selectize.js" 6 | ], 7 | "dependencies": { 8 | "selectize": ">=0.12.1" 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ## 3.0.2 (2017-03-26) 2 | 3 | Changes: 4 | 5 | - Updated version so a new tag/release can be created where the version in the package.json version matches the tag/release version 6 | - Updated package.json so it was valid. 7 | 8 | ## 3.0.1 (2015-09-07) 9 | 10 | Documentation: 11 | 12 | - Added CHANGELOG 13 | - Updated README concerning config.options 14 | 15 | ## 3.0.0 (2015-08-07) 16 | 17 | Changes: 18 | 19 | - Dropped support for simple arrays `['Option 1', 'Option 2']` in order to simplify the directive and ensure consistent behavior. 20 | - Renamed `'selectize.js'` to `'angular-selectize.js'` to avoid confusion. 21 | - update to selectize 0.12.1 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-selectize2", 3 | "keywords": [ 4 | "select", 5 | "ui", 6 | "form", 7 | "input", 8 | "control", 9 | "autocomplete", 10 | "tagging", 11 | "angular", 12 | "directive", 13 | "tag" 14 | ], 15 | "main": "dist/angular-selectize.js", 16 | "description": "This is an Angular.js directive for Brian Reavis's selectize jQuery plugin. It supports all of Selectize's features", 17 | "version": "v3.0.2", 18 | "license": "MIT", 19 | "repository": { 20 | "type": "git", 21 | "url": "git://github.com/machineboy2045/angular-selectize.git" 22 | }, 23 | "dependencies": { 24 | "selectize": ">=0.12.1" 25 | }, 26 | "engines": { 27 | "node": "*" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License 2 | 3 | Copyright (c) 2014 Will Jensen https://github.com/machineboy2045 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | angular-selectize 2 | ================== 3 | ![selectize5](https://cloud.githubusercontent.com/assets/4087667/5633745/2cfeac18-958f-11e4-9e62-6eba90547b4c.png) 4 | 5 | ### Demo 6 | [Try the Demo on Plunker](http://plnkr.co/edit/nTf19f?p=preview) 7 | 8 | ### Features 9 | This is an Angular.js directive for Brian Reavis's [selectize jQuery plugin](http://brianreavis.github.io/selectize.js/). It supports all of Selectize's features. Here are some highlights: 10 | 11 | * Better performance than UI-Select ([ui-select](http://plnkr.co/edit/pSJNHS?p=preview) vs [angular-selectize](http://plnkr.co/edit/23VkhV?p=preview)) 12 | * Selectize is ~7kb (gzipped) 13 | * Smart Ranking / Multi-Property Searching & Sorting 14 | * Angular Models & Bindings 15 | * Skinnable 16 | * Keyboard support 17 | 18 | 19 | ## Upgrading to version 3.x.x 20 | Previous versions supported simple arrays for options `['Option 1', 'Option 2']`. Version 3.0 drops this in order 21 | to simplify the directive and make it more consistent with the original Selectize. 22 | 23 | Also note the main js file has been renamed from `'selectize.js'` to `'angular-selectize.js'`. 24 | 25 | 26 | ## Dependencies 27 | 28 | - [AngularJS](http://angularjs.org/) 29 | - [JQuery](http://jquery.com/) 30 | - [Selectize](http://brianreavis.github.io/selectize.js/) 31 | 32 | ## Install 33 | Install with [Bower](http://bower.io) 34 | 35 | `$ bower install angular-selectize2` 36 | 37 | Load the script files in your application: 38 | ```html 39 | 40 | 41 | 42 | 43 | 44 | ``` 45 | 46 | 47 | Add the selectize module as a dependency to your application module: 48 | 49 | ```javascript 50 | var myAppModule = angular.module('MyApp', ['selectize']); 51 | ``` 52 | 53 | ## Usage 54 | 55 | ```javascript 56 | $scope.myModel = 1; 57 | 58 | $scope.myOptions = [ 59 | {id: 1, title: 'Spectrometer'}, 60 | {id: 2, title: 'Star Chart'}, 61 | {id: 3, title: 'Laser Pointer'} 62 | ]; 63 | 64 | $scope.myConfig = { 65 | create: true, 66 | valueField: 'id', 67 | labelField: 'title', 68 | delimiter: '|', 69 | placeholder: 'Pick something', 70 | onInitialize: function(selectize){ 71 | // receives the selectize object as an argument 72 | }, 73 | // maxItems: 1 74 | }; 75 | ``` 76 | 77 | 78 | ```html 79 | 80 | ``` 81 | ## Differences in Angular version 82 | Please note in the example that, unlike the original Selectize, options should NOT be passed in the config object. 83 | 84 | ## More Documentation 85 | - [Selectize config options](https://github.com/brianreavis/selectize.js/blob/master/docs/usage.md) 86 | - [Selectize API](https://github.com/brianreavis/selectize.js/blob/master/docs/api.md) 87 | 88 | ## Config 89 | #### Inline 90 | 91 | ```html 92 | 93 | ``` 94 | 95 | 96 | #### Global 97 | To define global defaults, you can configure the `selectize` injectable: 98 | 99 | ```javascript 100 | MyApp.value('selectizeConfig', { 101 | delimiter: '|' 102 | }); 103 | ``` 104 | -------------------------------------------------------------------------------- /dist/angular-selectize.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Angular Selectize2 3 | * https://github.com/machineboy2045/angular-selectize 4 | **/ 5 | 6 | angular.module('selectize', []).value('selectizeConfig', {}).directive("selectize", ['selectizeConfig', function(selectizeConfig) { 7 | return { 8 | restrict: 'EA', 9 | require: '^ngModel', 10 | scope: { ngModel: '=', config: '=?', options: '=?', ngDisabled: '=', ngRequired: '&' }, 11 | link: function(scope, element, attrs, modelCtrl) { 12 | 13 | var selectize, 14 | settings = angular.extend({}, Selectize.defaults, selectizeConfig, scope.config); 15 | 16 | scope.options = scope.options || []; 17 | scope.config = scope.config || {}; 18 | 19 | var isEmpty = function(val) { 20 | return val === undefined || val === null || !val.length; //support checking empty arrays 21 | }; 22 | 23 | var toggle = function(disabled) { 24 | disabled ? selectize.disable() : selectize.enable(); 25 | } 26 | 27 | var validate = function() { 28 | var isInvalid = (scope.ngRequired() || attrs.required || settings.required) && isEmpty(scope.ngModel); 29 | modelCtrl.$setValidity('required', !isInvalid); 30 | }; 31 | 32 | var setSelectizeOptions = function(curr, prev) { 33 | angular.forEach(prev, function(opt){ 34 | if(curr.indexOf(opt) === -1){ 35 | var value = opt[settings.valueField]; 36 | selectize.removeOption(value, true); 37 | } 38 | }); 39 | 40 | selectize.addOption(curr, true); 41 | 42 | selectize.refreshOptions(false); // updates results if user has entered a query 43 | setSelectizeValue(); 44 | } 45 | 46 | var setSelectizeValue = function() { 47 | validate(); 48 | 49 | selectize.$control.toggleClass('ng-valid', modelCtrl.$valid); 50 | selectize.$control.toggleClass('ng-invalid', modelCtrl.$invalid); 51 | selectize.$control.toggleClass('ng-dirty', modelCtrl.$dirty); 52 | selectize.$control.toggleClass('ng-pristine', modelCtrl.$pristine); 53 | 54 | if (!angular.equals(selectize.items, scope.ngModel)) { 55 | selectize.setValue(scope.ngModel, true); 56 | } 57 | } 58 | 59 | settings.onChange = function(value) { 60 | var value = angular.copy(selectize.items); 61 | if (settings.maxItems == 1) { 62 | value = value[0] 63 | } 64 | modelCtrl.$setViewValue( value ); 65 | 66 | if (scope.config.onChange) { 67 | scope.config.onChange.apply(this, arguments); 68 | } 69 | }; 70 | 71 | settings.onOptionAdd = function(value, data) { 72 | if( scope.options.indexOf(data) === -1 ) { 73 | scope.options.push(data); 74 | 75 | if (scope.config.onOptionAdd) { 76 | scope.config.onOptionAdd.apply(this, arguments); 77 | } 78 | } 79 | }; 80 | 81 | settings.onInitialize = function() { 82 | selectize = element[0].selectize; 83 | 84 | setSelectizeOptions(scope.options); 85 | 86 | //provides a way to access the selectize element from an 87 | //angular controller 88 | if (scope.config.onInitialize) { 89 | scope.config.onInitialize(selectize); 90 | } 91 | 92 | scope.$watchCollection('options', setSelectizeOptions); 93 | scope.$watch('ngModel', setSelectizeValue); 94 | scope.$watch('ngDisabled', toggle); 95 | }; 96 | 97 | element.selectize(settings); 98 | 99 | element.on('$destroy', function() { 100 | if (selectize) { 101 | selectize.destroy(); 102 | element = null; 103 | } 104 | }); 105 | } 106 | }; 107 | }]); 108 | --------------------------------------------------------------------------------