angular-chosen
==============

AngularJS Chosen directive

This directive brings the Chosen jQuery plugin
into AngularJS with ngModel and ngOptions integration.

To use, include "angular-chosen" as a dependency in your Angular module. You can now
use the "chosen" directive as an attribute on any select element. Angular version 1.2+ is required.

Installation

$ npm install angular-chosen -S

Yeoman or Bower install

If you use Yeoman or Bower install, you need to rename the chosen.jquery.js or the chosen.proto.js to chosen.js. Otherwise Chosen won't be included in your index.html.

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

$3

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

``html

Alaska
Arizona
Arkansas
California

`

$3

`html
data-placeholder="Pick one of these"
disable-search="true"
allow-single-deselect="true">

This is fun
I like Chosen so much
I also like bunny rabbits

`
Note: the empty option element is mandatory when using allow-single-deselect

$3

`html
chosen
ng-model="state"
ng-options="s for s in states">

`

Note: don't try to use ngModel with ngRepeat. It won't work. Use ngOptions. It's better that way.

Also important: if your ngModel is null or undefined, you must manually include an empty option inside your , otherwise you'll encounter strange off-by-one errors:

`html


chosen
ng-model="state"
ng-options="s for s in states">


`

This annoying behavior is alluded to in the examples in the documentation for ngOptions.

#### Works well with other AngularJS directives

`html
ng-model="state"
ng-options="s for s in states"
ng-disabled="editable">

`

$3

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
`js
angular.module('App', ['ngResource', 'localytics.directives'])
.controller('BeerCtrl', function($scope) {
$scope.beers = $resource('api/beers').query()
});
`

##### index.html
`html



`

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 undefined` while your data is loading!

See the example directory for more detailed usage.