Created
September 10, 2014 13:21
-
-
Save masimplo/fe39ebe53510e832da34 to your computer and use it in GitHub Desktop.
Selectize Directive Selectize AngularJS Directive Demo // source http://jsbin.com/hozegujebibi/1
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html ng-app="demo"> | |
| <head> | |
| <meta name="description" content="Selectize AngularJS Directive Demo" /> | |
| <meta charset="utf-8"> | |
| <title>Selectize Directive</title> | |
| <link rel="stylesheet" href="http://brianreavis.github.io/selectize.js/css/selectize.default.css" /> | |
| <link rel="stylesheet" href="style.css" /> | |
| </head> | |
| <body ng-controller="DemoCtrl"> | |
| <h1>Selectize Directive Demo</h1> | |
| <p> | |
| This demonstrates an AngularJS directive interface to the <a href="https://github.com/brianreavis/selectize.js/">selectize</a> JQuery plugin. | |
| </p> | |
| <ul> | |
| <li>Binding selectize to an ngModel requires $render, $parsers and $formatters hooks.</li> | |
| <li>The change event Angular uses to watch the select element must be removed to avoid digest errors.</li> | |
| <li>The example is using ES6, but can be run through <a href="http://google.github.io/traceur-compiler/demo/repl.html">traceur</a> to produce ES5 syntax if needed.</li> | |
| </ul> | |
| <p> | |
| <input data-selectize="" ng-model="selectize1" data-options="options" /> | |
| Value: {{selectize1}} | |
| </p> | |
| <p> | |
| <select data-selectize="" ng-model="selectize2"> | |
| <option value="1">Option 1</option> | |
| <option value="2">Option 2</option> | |
| <option value="3">Option 3</option> | |
| </select> | |
| Value: {{selectize2}} | |
| </p> | |
| <p> | |
| <select data-selectize="create:true, plugins:['remove_button']" ng-model="selectize3" data-options="options" multiple="multiple"></select> | |
| Value: {{selectize3}} | |
| </p> | |
| <p>License: <a href="http://www.apache.org/licenses/LICENSE-2.0">Apache 2.0</a></p> | |
| <script type="text/javascript" src="http://traceur-compiler.googlecode.com/git/bin/traceur.js"></script> | |
| <script type="text/javascript" src="http://traceur-compiler.googlecode.com/git/src/bootstrap.js"></script> | |
| <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> | |
| <script type="text/javascript" src="http://code.angularjs.org/1.2.16/angular.js"></script> | |
| <script type="text/javascript" src="http://brianreavis.github.io/selectize.js/js/selectize.js"></script> | |
| <script type="module"> | |
| angular | |
| .module('demo', []) | |
| .controller('DemoCtrl', $scope => { | |
| $scope.options = [{value:'1', text:'Option 1'}, {value:'2', text:'Option 2'}, {value:'3', text:'Option 3'}]; | |
| $scope.selectize1 = [2]; | |
| }) | |
| /** | |
| * @directive selectize http://brianreavis.github.io/selectize.js/ | |
| * | |
| * Add as an attribute to an input or select element. The attribute value is parsed as a configuration object for | |
| * selectize. Accepts an options attribute referencing a scope object to watch for options. (Note that these | |
| * must be in selectize-native {value:,text:} format; this is not an ng-option comprehension.) | |
| * | |
| * Requires an ng-model binding. The model is treated as an array of strings. | |
| * | |
| * @license http://www.apache.org/licenses/LICENSE-2.0 | |
| */ | |
| .directive('selectize', function($timeout) { // https://github.com/jshint/jshint/issues/1692 | |
| return { | |
| restrict: 'A', | |
| require: 'ngModel', | |
| priority: 1, // so we can override functions on ngModel | |
| link: (scope, elem, attrs, ngModel) => { | |
| if (elem[0].nodeName === 'SELECT') { | |
| elem.off('change'); // Remove change event bound by select directive; it causes digest errors. | |
| } | |
| var value = attrs.selectize; // value of the directive attribute | |
| var options; | |
| if (value.indexOf(':') == -1) { | |
| options = {}; | |
| } else { | |
| if (!value.startsWith('{')) { | |
| value = '{' + value + '}'; | |
| } | |
| options = scope.$eval('(' + value + ')'); | |
| } | |
| if (attrs.options) { | |
| options.options = scope.$eval(attrs.options); | |
| } | |
| options.delimiter = options.delimiter || ','; | |
| var selectize = elem.selectize(options)[0].selectize; // drill down to the selectize object | |
| function getValues() { | |
| var values = selectize.getValue(); | |
| return angular.isArray(values) ? values : String(values).split(options.delimiter); | |
| } | |
| selectize.on('change', () => { | |
| $timeout(() => { // instead of $apply to avoid digest conflict | |
| ngModel.$setViewValue(getValues().join(options.delimiter)); | |
| }); | |
| }); | |
| if (attrs.options) { | |
| scope.$watch(attrs.options, newValues => { | |
| var values = getValues(); | |
| selectize.clearOptions(); | |
| angular.forEach(newValues, option => { | |
| selectize.addOption(option); | |
| }); | |
| selectize.setValue(values); // will ignore any that no longer exist | |
| }); | |
| } | |
| ngModel.$render = () => { | |
| var newValue = ngModel.$modelValue || []; | |
| if (!angular.equals(newValue, getValues())) { // avoid infinite loop w/change event | |
| selectize.setValue(newValue); | |
| selectize.refreshItems(); // https://github.com/brianreavis/selectize.js/issues/438 | |
| } | |
| }; | |
| ngModel.$parsers.push(value => value ? value.split(options.delimiter) : []); | |
| ngModel.$formatters.push(values => values ? values.join(options.delimiter) : undefined); | |
| } | |
| }; | |
| }) | |
| ;//end module | |
| </script> | |
| <script id="jsbin-source-html" type="text/html"><!DOCTYPE html> | |
| <html ng-app="demo"> | |
| <head> | |
| <meta name="description" content="Selectize AngularJS Directive Demo" /> | |
| <meta charset="utf-8"> | |
| <title>Selectize Directive</title> | |
| <link rel="stylesheet" href="http://brianreavis.github.io/selectize.js/css/selectize.default.css" /> | |
| <link rel="stylesheet" href="style.css" /> | |
| </head> | |
| <body ng-controller="DemoCtrl"> | |
| <h1>Selectize Directive Demo</h1> | |
| <p> | |
| This demonstrates an AngularJS directive interface to the <a href="https://github.com/brianreavis/selectize.js/">selectize</a> JQuery plugin. | |
| </p> | |
| <ul> | |
| <li>Binding selectize to an ngModel requires $render, $parsers and $formatters hooks.</li> | |
| <li>The change event Angular uses to watch the select element must be removed to avoid digest errors.</li> | |
| <li>The example is using ES6, but can be run through <a href="http://google.github.io/traceur-compiler/demo/repl.html">traceur</a> to produce ES5 syntax if needed.</li> | |
| </ul> | |
| <p> | |
| <input data-selectize="" ng-model="selectize1" data-options="options" /> | |
| Value: {{selectize1}} | |
| </p> | |
| <p> | |
| <select data-selectize="" ng-model="selectize2"> | |
| <option value="1">Option 1</option> | |
| <option value="2">Option 2</option> | |
| <option value="3">Option 3</option> | |
| </select> | |
| Value: {{selectize2}} | |
| </p> | |
| <p> | |
| <select data-selectize="create:true, plugins:['remove_button']" ng-model="selectize3" data-options="options" multiple="multiple"></select> | |
| Value: {{selectize3}} | |
| </p> | |
| <p>License: <a href="http://www.apache.org/licenses/LICENSE-2.0">Apache 2.0</a></p> | |
| <script type="text/javascript" src="//traceur-compiler.googlecode.com/git/bin/traceur.js"><\/script> | |
| <script type="text/javascript" src="//traceur-compiler.googlecode.com/git/src/bootstrap.js"><\/script> | |
| <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"><\/script> | |
| <script type="text/javascript" src="//code.angularjs.org/1.2.16/angular.js"><\/script> | |
| <script type="text/javascript" src="//brianreavis.github.io/selectize.js/js/selectize.js"><\/script> | |
| <script type="module"> | |
| angular | |
| .module('demo', []) | |
| .controller('DemoCtrl', $scope => { | |
| $scope.options = [{value:'1', text:'Option 1'}, {value:'2', text:'Option 2'}, {value:'3', text:'Option 3'}]; | |
| $scope.selectize1 = [2]; | |
| }) | |
| /** | |
| * @directive selectize http://brianreavis.github.io/selectize.js/ | |
| * | |
| * Add as an attribute to an input or select element. The attribute value is parsed as a configuration object for | |
| * selectize. Accepts an options attribute referencing a scope object to watch for options. (Note that these | |
| * must be in selectize-native {value:,text:} format; this is not an ng-option comprehension.) | |
| * | |
| * Requires an ng-model binding. The model is treated as an array of strings. | |
| * | |
| * @license http://www.apache.org/licenses/LICENSE-2.0 | |
| */ | |
| .directive('selectize', function($timeout) { // https://github.com/jshint/jshint/issues/1692 | |
| return { | |
| restrict: 'A', | |
| require: 'ngModel', | |
| priority: 1, // so we can override functions on ngModel | |
| link: (scope, elem, attrs, ngModel) => { | |
| if (elem[0].nodeName === 'SELECT') { | |
| elem.off('change'); // Remove change event bound by select directive; it causes digest errors. | |
| } | |
| var value = attrs.selectize; // value of the directive attribute | |
| var options; | |
| if (value.indexOf(':') == -1) { | |
| options = {}; | |
| } else { | |
| if (!value.startsWith('{')) { | |
| value = '{' + value + '}'; | |
| } | |
| options = scope.$eval('(' + value + ')'); | |
| } | |
| if (attrs.options) { | |
| options.options = scope.$eval(attrs.options); | |
| } | |
| options.delimiter = options.delimiter || ','; | |
| var selectize = elem.selectize(options)[0].selectize; // drill down to the selectize object | |
| function getValues() { | |
| var values = selectize.getValue(); | |
| return angular.isArray(values) ? values : String(values).split(options.delimiter); | |
| } | |
| selectize.on('change', () => { | |
| $timeout(() => { // instead of $apply to avoid digest conflict | |
| ngModel.$setViewValue(getValues().join(options.delimiter)); | |
| }); | |
| }); | |
| if (attrs.options) { | |
| scope.$watch(attrs.options, newValues => { | |
| var values = getValues(); | |
| selectize.clearOptions(); | |
| angular.forEach(newValues, option => { | |
| selectize.addOption(option); | |
| }); | |
| selectize.setValue(values); // will ignore any that no longer exist | |
| }); | |
| } | |
| ngModel.$render = () => { | |
| var newValue = ngModel.$modelValue || []; | |
| if (!angular.equals(newValue, getValues())) { // avoid infinite loop w/change event | |
| selectize.setValue(newValue); | |
| selectize.refreshItems(); // https://github.com/brianreavis/selectize.js/issues/438 | |
| } | |
| }; | |
| ngModel.$parsers.push(value => value ? value.split(options.delimiter) : []); | |
| ngModel.$formatters.push(values => values ? values.join(options.delimiter) : undefined); | |
| } | |
| }; | |
| }) | |
| ;//end module | |
| <\/script> | |
| </body> | |
| </html></script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment