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. Angular version 1.2+ is required.

Installation

$ bower install angular-chosen-localytics --save

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.