https://github.com/dbtek/angular-chosen
Angular directives for Chosen
https://github.com/dbtek/angular-chosen
Last synced: over 1 year ago
JSON representation
Angular directives for Chosen
- Host: GitHub
- URL: https://github.com/dbtek/angular-chosen
- Owner: dbtek
- License: mit
- Created: 2014-03-14T14:47:45.000Z (over 12 years ago)
- Default Branch: master
- Last Pushed: 2015-04-01T08:48:19.000Z (about 11 years ago)
- Last Synced: 2025-02-19T10:05:47.151Z (over 1 year ago)
- Language: CSS
- Size: 146 KB
- Stars: 1
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
angular-chosen
==============
AngularJS Chosen directive
Based on [localytics' angular-chosen](https://github.com/localytics/angular-chosen). Provides some extra directives such as accessing search input value within scope and passing scope variable as placeholder.
This directive brings the [Chosen](http://harvesthq.github.com/chosen/) jQuery plugin
into AngularJS with ngModel and ngOptions integration.
To use, include "ngChosen" 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-ngchosen
# Features
* Works with `ngModel` and `ngOptions`
* Supports usage of promises in `ngOptions`
* Pass scope function via attributes to access search input term.
* Pass placeholder variable via attributes
* 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()`
```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
```
### 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', 'ngChosen'])
.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!
### Access search input term in Angular scope
**Html**
```html
```
**Script**
```js
angular.module('App', ['ngChosen'])
.controller('StateCtrl', function($scope) {
$scope.states = ['Alaska','Arizona','Arkansas','California'];
$scope.chosenChangeHandler = function chosenChangeHandler(val) {
// set model
$scope.chosenSearchTerm = val;
}
});
```