angular-chosen

This directive brings the Chosen jQuery plugin into AngularJS with ngModel and ngOptions integration.
Homepage:
4 people use it
Author: Assets.github.com%2fimages%2fgravatars%2fgravatar-org-420 localytics
Submitted by: Assets.github.com%2fimages%2fgravatars%2fgravatar-user-420 abuggia

angular-chosen

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 use the "chosen" directive as an attribute on any select element.

Features

  • Works with 'ngModel' and 'ngOptions'
  • Supports usage of promises in 'ngOptions'
  • Provides a 'loading' animation when 'ngOptions' collection is a promise backed by a remote source
  • Pass options to Chosen via attributes or by passing an object to the Chosen directive

Usage

Simple example

Similar to $("#states").chosen()

Pass any chosen options as attributes

Integration with ngModel and ngOptions

Loading from a remote data source

Include chosen-spinner.css and 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.

app.js
index.html

Image of select defined above in loading state:

See the example directory for more detailed usage.

comments powered by Disqus
This page was last updated almost 4 years ago.