Merge pull request #96 from machineboy2045/v3.0.0

V3.0.0

CHANGELOG.md

@@ -0,0 +1,14 @@
+## 3.0.1 (2015-09-07)
+
+Documentation:
+
+ - Added CHANGELOG
+ - Updated README concerning config.options
+
+## 3.0.0 (2015-08-07)
+
+Changes:
+
+ - Dropped support for simple arrays `['Option 1', 'Option 2']` in order to simplify the directive and ensure consistent behavior.
+ - Renamed `'selectize.js'` to `'angular-selectize.js'` to avoid confusion.
+ - update to selectize 0.12.1

README.md

@@ -3,20 +3,22 @@ angular-selectize
 ![selectize5](https://cloud.githubusercontent.com/assets/4087667/5633745/2cfeac18-958f-11e4-9e62-6eba90547b4c.png)
 
 ###Demo
-[Try the Demo on Plunker](https://plnkr.co/edit/X2YYPX?p=preview)
+[Try the Demo on Plunker](https://plnkr.co/edit/nTf19f?p=preview)
 
 ###Features
 This is an Angular.js directive for Brian Reavis's [selectize jQuery plugin](https://brianreavis.github.io/selectize.js/). It supports all of Selectize's features. Here are some highlights:
 
-* Better performance than UI-Select ([ui-select](https://plnkr.co/edit/pSJNHS?p=preview) vs [angular-selectize](https://plnkr.co/edit/xdyzf9?p=preview))
+* Better performance than UI-Select ([ui-select](https://plnkr.co/edit/pSJNHS?p=preview) vs [angular-selectize](https://plnkr.co/edit/23VkhV?p=preview))
 * 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.
 
 
 ## Dependencies
@@ -46,21 +48,7 @@ Add the selectize module as a dependency to your application module:
 var myAppModule = angular.module('MyApp', ['selectize']);
 ```
 
-## Basic Usage
-Setup your controller variables:
-
-```javascript
-$scope.myModel;
-$scope.myOptions = ['Spectrometer', 'Star Chart', 'Laser Pointer'];
-```
-
-Add the selectize element to your view template:
-
-```html
-<selectize options='myOptions' ng-model="myModel"></selectize>
-```
-
-## Advanced Usage
+## Usage
 
 ```javascript
 $scope.myModel = 1;
@@ -88,9 +76,10 @@ $scope.myConfig = {
 ```html
 <selectize config='myConfig' options='myOptions' ng-model="myModel"></selectize>
 ```
+##Differences in Angular version
+Please note in the example that, unlike the original Selectize, options should NOT be passed in the config object.
 
-
-##Documentation
+##More Documentation
 - [Selectize config options](https://github.com/brianreavis/selectize.js/blob/master/docs/usage.md)
 - [Selectize API](https://github.com/brianreavis/selectize.js/blob/master/docs/api.md)
 

bower.json

@@ -1,10 +1,10 @@
 {
  "name": "angular-selectize2",
- "version": "1.2.3",
+ "version": "3.0.1",
  "main" : [
- "./dist/selectize.js"
+ "./dist/angular-selectize.js"
  ],
  "dependencies": {
- "selectize": ">=0.9.0"
+ "selectize": ">=0.12.1"
  }
 }

dist/angular-selectize.js

@@ -0,0 +1,106 @@
+/**
+ * Angular Selectize2
+ * https://github.com/machineboy2045/angular-selectize
+ **/
+
+angular.module('selectize', []).value('selectizeConfig', {}).directive("selectize", ['selectizeConfig', function(selectizeConfig) {
+ return {
+ restrict: 'EA',
+ require: '^ngModel',
+ scope: { ngModel: '=', config: '=?', options: '=?', ngDisabled: '=', ngRequired: '&' },
+ link: function(scope, element, attrs, modelCtrl) {
+
+ var selectize,
+ settings = angular.extend({}, Selectize.defaults, selectizeConfig, scope.config);
+
+ scope.options = scope.options || [];
+ scope.config = scope.config || {};
+
+ var isEmpty = function(val) {
+ return val === undefined || val === null || !val.length; //support checking empty arrays
+ };
+
+ var toggle = function(disabled) {
+ disabled ? selectize.disable() : selectize.enable();
+ }
+
+ var validate = function() {
+ var isInvalid = (scope.ngRequired() || attrs.required || settings.required) && isEmpty(scope.ngModel);
+ modelCtrl.$setValidity('required', !isInvalid);
+ };
+
+ var setSelectizeOptions = function(curr, prev) {
+ angular.forEach(prev, function(opt){
+ if(curr.indexOf(opt) === -1){
+ var value = opt[settings.valueField];
+ selectize.removeOption(value, true);
+ }
+ });
+
+ selectize.addOption(curr, true);
+
+ setSelectizeValue();
+ }
+
+ var setSelectizeValue = function() {
+ validate();
+
+ selectize.$control.toggleClass('ng-valid', modelCtrl.$valid);
+ selectize.$control.toggleClass('ng-invalid', modelCtrl.$invalid);
+ selectize.$control.toggleClass('ng-dirty', modelCtrl.$dirty);
+ selectize.$control.toggleClass('ng-pristine', modelCtrl.$pristine);
+
+ if (!angular.equals(selectize.items, scope.ngModel)) {
+ selectize.setValue(scope.ngModel, true);
+ }
+ }
+
+ settings.onChange = function(value) {
+ var value = angular.copy(selectize.items);
+ if (settings.maxItems == 1) {
+ value = value[0]
+ }
+ modelCtrl.$setViewValue( value );
+
+ if (scope.config.onChange) {
+ scope.config.onChange.apply(this, arguments);
+ }
+ };
+
+ settings.onOptionAdd = function(value, data) {
+ if( scope.options.indexOf(data) === -1 ) {
+ scope.options.push(data);
+
+ if (scope.config.onOptionAdd) {
+ scope.config.onOptionAdd.apply(this, arguments);
+ }
+ }
+ };
+
+ settings.onInitialize = function() {
+ selectize = element[0].selectize;
+
+ setSelectizeOptions(scope.options);
+
+ //provides a way to access the selectize element from an
+ //angular controller
+ if (scope.config.onInitialize) {
+ scope.config.onInitialize(selectize);
+ }
+
+ scope.$watchCollection('options', setSelectizeOptions);
+ scope.$watch('ngModel', setSelectizeValue);
+ scope.$watch('ngDisabled', toggle);
+ };
+
+ element.selectize(settings);
+
+ element.on('$destroy', function() {
+ if (selectize) {
+ selectize.destroy();
+ element = null;
+ }
+ });
+ }
+ };
+}]);