kbanman / selectize-ng Goto Github PK

View Code? Open in Web Editor NEW

19.0 2.0 7.0 24 KB

Selectize directive for AngularJS with two-way bindings for both values and options

License: MIT License

JavaScript 89.07% HTML 10.93%

selectize-ng's Introduction

Selectize-ng

Selectize.js directive for AngularJS with two-way bindings for both values and options.

Requirements

AngularJS
selectize.js
jQuery (required by selectize)

Installation

You can get it from Bower

bower install selectize-ng

Load the assets into your application:

<link rel="stylesheet" href="bower_components/selectize-ng/dist/standalone/selectize.css"/>
<script type="text/javascript" src="bower_components/selectize-ng/dist/standalone/selectize-ng.min.js"></script>

Or if you want to use your own copy of selectize.js:

<link rel="stylesheet" href="bower_components/selectize/dist/css/selectize.css"/>
<script type="text/javascript" src="bower_components/selectize/dist/js/standalone/selectize.min.js"></script>
<script type="text/javascript" src="bower_components/selectize-ng/dist/selectize-ng.min.js"></script>

Add the module as a dependency to your angular app:

angular.module('myApp', ['selectize-ng'])

Usage

For tagging, use an <input> element:

<input type="text" selectize="config" options="suggestions" ng-model="selected"/>

And for an auto-suggesting single-value dropdown, use a <select>:

<select selectize="config" options="suggestions" ng-model="selected"></select>

config in the above examples are selectize config objects as documented here.

suggestion is an array of objects to use as items to choose from. By default the object need to be in the form { value: 1, text: 'Hello' }, but this can be configured using the valueField and labelField config directives;

Development

I use Karma and jshint to ensure the quality of the code. The easiest way to run these checks is to use grunt:

npm install -g grunt-cli
npm install && bower install
grunt watch

selectize-ng's People

Contributors

Stargazers

Watchers

Forkers

angelix jagged3dge dyorg pedrogoncalvesk tonysepia mavencare norutkow

selectize-ng's Issues

ng-disabled on select

How about to treat ng-disabled?

Returns string values instead of numerics for value field.

If the value field is a numeric, the value returned in ngModel bound field is a string.

bug?

Hello
I've been playing with selectize-ng almost whole night today and I didn't get it to work.
I am using require.js along with angular. Whatever I do I get:
(http://127.0.0.1:8000/static/selectize-ng/dist/standalone/selectize-ng.js:1179:44)
which resolves to: a.selectize() || {}), o = b.selectize(n)[0].selectize, o.on("change", function() ... Basically one of the selectizes here is missing. Line in readable form looks like:
console.log(element.selectize); //this is empty!
selectize = element.selectize(options)[0].selectize; // ~ line 20

Gist: https://gist.github.com/jacoor/8a67ef98205d1df16473

I've read people saying that there is a problem between jquery and other plugins, but I am completely confused right now. Would you be able to help?

remove options after option list updated

Imagine following situation :

Initially you have itemList = [{id: 0, name: 'first item'}, {id: 1, name: 'second item'}];
at some moment itemList assigned to [{id: 0, name: 'first item'}, {id: 2, name: 'third item'}]

expected - selectize contain 'first item' and 'third item'
actual - selectize contain 'first item', 'second item' and 'third item'

Error: data is undefined in console

Hi guys,

I have noticed the following error in the console:
Error: data is undefined

have traced it to the following bit of code in selectize-ng:

if (attrs.options) {
          scope.$parent.$watchCollection(attrs.options, setSelectizeOptions);
        }

I guess the expected behaviour here is that #watchCollection will only execute listener function (setSelectizeOptions) when there are new values.

However, I have added the following line into setSelectizeOptions function and confirmed that sometimes it is being called even without the newOptions argument:

function setSelectizeOptions(newOptions) {
			if(newOptions==null){
				console.log("newOptions were NULL");
			}
          var values = parseValues(ngModel.$viewValue);
          selectize.addOption(newOptions);
          selectize.refreshOptions(false);
          if (options.mode === 'multi' && newOptions) {
            restoreInvalidValues(newOptions, values);
          }
          setSelectizeValue(values);
        }

Has anyone else had similar behaviour?

Spurious, untraceable error in console

I have a project with selectize-ng menus. One one page, no issues. On another page, I'm getting this error (although the menu itself is working and populated):

TypeError: Cannot read property 'name' of undefined
    at a.extend.addOption (selectize-ng.min.js:2)
    at l (selectize-ng.min.js:5)
    at Object.fn (angular.min.js:120)
    at k.$digest (angular.min.js:122)
    at k.$apply (angular.min.js:125)
    at n (angular.min.js:80)
    at O (angular.min.js:84)
    at XMLHttpRequest.B.onload (angular.min.js:85)

See http://stackoverflow.com/questions/29222526/angular-js-selectize-error for full code.