Repository files navigation

AngularJS Chosen directive

This directive brings theChosen jQuery plugininto AngularJS with ngModel and ngOptions integration.

To use, includelocalytics.directives as a dependency in your Angular module. You can nowuse thechosen directive as an attribute on any select element. Angular version 1.3+ is required, but recommended 1.4.9+.

• Documentation onGithub Page
• Examples onexample/index.html

Via bower

$ bower install angular-chosen-localytics --save

Via npm

$ npm install angular-chosen-localytics --save

Viacdn

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/angular-chosen-localytics/1.9.2/angular-chosen.min.js"></script>

Or download zip file

Download v1.9.2

If you use Yeoman or Bower install, you need to rename thechosen.jquery.js or thechosen.proto.js tochosen.js. Otherwise Chosen won't be included in yourindex.html.

• Works withngModel andngOptions
• Supports usage of promises inngOptions
• Provides a 'loading' animation when 'ngOptions' collection is a promise backed by a remote source
• Pass options toChosen via attributes or by passing an object to the Chosen directive
• Provider with default values withchosenProvider (read: Added config-provider) [since 1.6.0]

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

<selectchosenmultipleid="states"><optionvalue="AK">Alaska</option><optionvalue="AZ">Arizona</option><optionvalue="AR">Arkansas</option><optionvalue="CA">California</option></select>

<selectchosendata-placeholder-text-single="'Pick one of these'"disable-search="true"allow-single-deselect="true"><optionvalue=""></option><option>This is fun</option><option>I like Chosen so much</option><option>I also like bunny rabbits</option></select>

Note: the empty option element is mandatory when usingallow-single-deselect

<selectmultiplechosenng-model="state"ng-options="s for s in states"></select>

Note: don't try to usengModel withngRepeat. It won't work. UsengOptions. It's better that way.

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

<selectmultiplechosenng-model="state"ng-options="s for s in states"><optionvalue=""></option></select>

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

<selectchosenng-model="state"ng-options="s for s in states"ng-disabled="editable"><optionvalue=""></option></select>

Includechosen-spinner.css andspinner.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 innoResultsText in your options.

angular.module('App',['ngResource','localytics.directives']).controller('BeerCtrl',function($scope,$resource){$scope.beers=$resource('api/beers').query()});

<divng-controller="BeerCtrl"><selectchosendata-placeholder-text-single="'Choose a beer'"no-results-text="'Could not find any beers :('"ng-model="beer"ng-options="b for b in beers"><optionvalue=""></option></select></div>

Image of select defined above in loading state:<img src="https://raw.github.com/localytics/angular-chosen/master/example/choose-a-beer.png">

Note: Assigning promises directly to scope is now deprecated in Angular 1.2+. Assign the results of the promise to scopeonce the promise returns. The loader animation will still work as long as the collection expressionevaluates toundefined while your data is loading!

angular.module('chosenExampleApp',['localytics.directives']).config(['chosenProvider',function(chosenProvider){chosenProvider.setOption({no_results_text:'There is no results!',placeholder_text_multiple:'Choose one or more!'});}]);