Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/leocaseiro/angular-chosen
AngularJS Chosen directive is an AngularJS Directive that brings the Chosen jQuery in a AngularJS way
https://github.com/leocaseiro/angular-chosen
angular-chosen angularjs angularjs-directives chosen dropdown multiple select
Last synced: 30 days ago
JSON representation
AngularJS Chosen directive is an AngularJS Directive that brings the Chosen jQuery in a AngularJS way
- Host: GitHub
- URL: https://github.com/leocaseiro/angular-chosen
- Owner: leocaseiro
- License: mit
- Created: 2013-03-28T21:13:31.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2023-02-28T02:51:28.000Z (over 1 year ago)
- Last Synced: 2024-05-02T00:26:39.385Z (6 months ago)
- Topics: angular-chosen, angularjs, angularjs-directives, chosen, dropdown, multiple, select
- Language: JavaScript
- Homepage: http://leocaseiro.github.io/angular-chosen/
- Size: 1.08 MB
- Stars: 683
- Watchers: 54
- Forks: 249
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Angular Chosen Localytics [](https://github.com/leocaseiro/angular-chosen) [](https://www.npmjs.com/package/angular-chosen-localytics)
==============
AngularJS Chosen directive
This directive brings the [Chosen](http://harvesthq.github.com/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.3+ is required, but recommended 1.4.9+.
# [Full Documentation with Examples](http://leocaseiro.github.io/angular-chosen/)
* Documentation on [Github Page](http://leocaseiro.github.io/angular-chosen/)
* Examples on [example/index.html](http://htmlpreview.github.io/?https://github.com/leocaseiro/angular-chosen/blob/master/example/index.html)
## Installation (npm or bower)
Via bower
$ bower install angular-chosen-localytics --save
Via npm
$ npm install angular-chosen-localytics --save
Via [cdn](https://cdnjs.com/libraries/angular-chosen-localytics)
```html
```
Or download zip file
> [Download v1.9.2](https://github.com/leocaseiro/angular-chosen/archive/1.9.2.zip)
## 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
* Provider with default values with `chosenProvider` ([read: Added config-provider](https://github.com/leocaseiro/angular-chosen/pull/231)) [since 1.6.0]
# Usage
### Simple example
Similar to `$("#states").chosen()`
```html
Alaska
Arizona
Arkansas
California
```
### Pass any chosen options as attributes
```html
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`
### Integration with `ngModel` and `ngOptions`
```html
```
> 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
```
> This annoying behavior is alluded to in the examples in the [documentation for ngOptions](http://docs.angularjs.org/api/ng.directive:select).
#### Works well with other AngularJS directives
```html
```
### 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
```js
angular.module('App', ['ngResource', 'localytics.directives'])
.controller('BeerCtrl', function($scope, $resource) {
$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!
### Default values with chosenProvider (thanks @zlodes) [since 1.6.0]
```javascript
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!'
});
}]);
```