AngularJS Chosen directive
This directive brings the Chosen jQuery plugin into AngularJS with ngModel and ngOptions integration.
To use, include
localytics.directives as a dependency in your Angular module. You can now
chosen directive as an attribute on any select element. Angular version 1.3+ is required, but recomended 1.4.9+.
Installation (npm or bower)
$ bower install angular-chosen-localytics --save
$ npm install angular-chosen-localytics --save
Or download zip file
Yeoman or Bower install
If you use Yeoman or Bower install, you need to rename the
chosen.jquery.js or the
chosen.js. Otherwise Chosen won't be included in your
- Works with
- Supports usage of promises in
- Provides a 'loading' animation when 'ngOptions' collection is a promise backed by a remote source
- Pass options to
Chosenvia attributes or by passing an object to the Chosen directive
- Provider with default values with
chosenProvider(read: Added config-provider) [since 1.6.0]
Alaska Arizona Arkansas California
Pass any chosen options as attributes
This is fun I like Chosen so much I also like bunny rabbits
Note: the empty option element is mandatory when using
Note: don't try to use
ngRepeat. It won't work. Use
ngOptions. It's better that way.
Also important: if your
ngModelis null or undefined, you must manually include an empty option inside your
<select>, otherwise you'll encounter strange off-by-one errors:
This annoying behavior is alluded to in the examples in the documentation for ngOptions.
Works well with other AngularJS directives
Loading from a remote data source
spinner.gif to show an Ajax spinner icon while your data is loading. If the collection comes back empty, the directive will disable the element and show a default
"No values available" message. You can customize this message by passing in
noResultsText in your options.
Image of select defined above in loading state:
Note: Assigning promises directly to scope is now deprecated in Angular 1.2+. Assign the results of the promise to scope once the promise returns. The loader animation will still work as long as the collection expression evaluates to
undefinedwhile your data is loading!
Default values with chosenProvider (thanks @zlodes) [since 1.6.0]