Angular Chosen Localytics
![npm](https://img.shields.io/badge/npm-v1.4.0-brightgreen.svg)
AngularJS Chosen directive
This directive brings the Chosen jQuery plugin into AngularJS with ngModel and ngOptions integration.
Angular version 1.2+ is required.
Get Started
Installation
install via bower
bower install angular-chosen-localytics –save
install via npm
npm install angular-chosen-localytics –save
Download files
Include libraries
<link rel="stylesheet" type="text/css" href="./bower_components/chosen/chosen.css" />
<script src="./bower_components/jquery/dist/jquery.min.js"></script>
<script src="./bower_components/angular/angular.min.js"></script>
<script src="./bower_components/chosen/chosen.jquery.js"></script>
<script src="./bower_components/angular-chosen-localytics/dist/angular-chosen.min.js"></script>
Dependency Injection
Include `‘localytics.directives’ as dependency in your Angular Module
angular.module('App', ['localytics.directives'])
Directive chosen on <select>
Use the chosen directive as an attribute on any <select> element.
<select chosen>...</select>
Usage
Simple example
Similar to $("#states").chosen()
<select chosen multiple id="states">
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
</select>
chosen options
Pass any chosen options as attributes
Option | Default | Description |
---|---|---|
allow-single-deselect | false | When set to true on a single select, Chosen adds a UI element which selects the first element (if it is blank). |
disable-search | false | When set to true, Chosen will not display the search field (single selects only). |
disable-search-threshold | 0 | Hide the search input on single selects if there are n or fewer options. |
enable-split-word-search | true | By default, searching will match on any word within an option tag. Set this option to false if you want to only match on the entire text of an option tag. |
inherit-select-classes | false | When set to true, Chosen will grab any classes on the original select field and add them to Chosen’s container div. |
max-selected-options | Infinity | Limits how many options the user can select. When the limit is reached, the chosen:maxselected event is triggered. |
search-contains | false | By default, Chosen’s search matches starting at the beginning of a word. Setting this option to true allows matches starting from anywhere within a word. This is especially useful for options that include a lot of special characters or phrases in ()s and []s. |
single-backstroke-delete | true | By default, pressing delete/backspace on multiple selects will remove a selected choice. When false, pressing delete/backspace will highlight the last choice, and a second press deselects it. |
width | Original select width. | The width of the Chosen select box. By default, Chosen attempts to match the width of the select box you are replacing. If your select is hidden when Chosen is instantiated, you must specify a width or the select will show up with a width of 0. |
display-disabled-options | true | By default, Chosen includes disabled options in search results with a special styling. Setting this option to false will hide disabled results and exclude them from searches. |
display-selected-options | true | By default, Chosen includes selected options in search results with a special styling. Setting this option to false will hide selected results and exclude them from searches. |
include-group-label-in-selected | false | By default, Chosen only shows the text of a selected option. Setting this option to true will show the text and group (if any) of the selected option. |
max-shown-results | Infinity | Only show the first (n) matching options in the results. This can be used to increase performance for selects with very many options. |
Option | Default (English) | Description |
---|---|---|
no-results-text | “No results match” | The text to be displayed when no matching results are found. The current search is shown at the end of the text (e.g., No results match “Bad Search”). |
placeholder-text-multiple | “Select Some Options” | The text to be displayed as a placeholder when no options are selected for a multiple select. |
placeholder-text-single | “Select an Option” | The text to be displayed as a placeholder when no options are selected for a single select. |
<select chosen
placeholder-text-single="Pick one of these"
disable-search="true"
allow-single-deselect="true">
<option value=""></option>
<option>This is fun</option>
<option>I like Chosen so much</option>
<option>I also like bunny rabbits</option>
</select>
ngOptions and ngModel
Integration with ngModel
and ngOptions
<select chosen
ng-model="state"
ng-options="s for s in states">
</select>
This annoying behavior is alluded to in the examples in the documentation for ngOptions.
Multiple Select (Example)
Integration with ngModel
and ngOptions
with multiple select
<select chosen
ng-model="state.selected"
ng-options="s for s in states">
<option value=""></option>
</select>
AngularJS <select> directives
Works well with other AngularJS directives
<select chosen
ng-model="state"
ng-options="s for s in states"
ng-disabled="editable">
</select>
Remote source $resource
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
angular.module('App', ['ngResource', 'localytics.directives'])
.controller('BeerCtrl', function($scope, $resource) {
$scope.beers = $resource('api/beers').query()
});
index.html
<div ng-controller="BeerCtrl">
<select chosen
placeholder-text-single="Choose a beer"
no-results-text="'Could not find any beers :('"
ng-model="beer"
ng-options="b for b in beers">
</select>
</div>
Image of select defined above in loading state:
AJAX $http
app.js
angular.module('App', ['localytics.directives'])
.controller('PostCtrl', function($scope, $http) {
$http('api/posts').success(function(data) {
$scope.posts = data;
});
});
index.html
<div ng-controller="PostCtrl">
<select chosen
placeholder-text-single="Choose a post"
no-results-text="'Could not find any post :('"
ng-model="post"
ng-options="p for p in posts">
</select>
</div>
ng-if instead of ng-show/ng-hide (Example)
Angular Chosen, don’t work well with ng-show
or ng-hide
.
However, ng-if
will do the job for you
index.html
<div ng-controller="PostCtrl">
<input type="checkbox" ng-model="showChosen" value="1" />
<select chosen
ng-if="showChosen"
ng-model="post"
ng-options="p for p in posts">
</select>
</div>
Create new Item
Angular Chosen, didn’t accept one if they most wanted feature which is add new item if no results match. However, there’s a fork that adds this feature and Angular Chosen is compatible with.
First step is switch from oficial chosen.js
and chosen.css
to koenpunt/chosen versions.
You can download it here: https://github.com/koenpunt/chosen/releases
Then, you’ll have 4 new attributes: create-option-text
, persistent-create-option
, skip-no-results
and create-option
Option | Default (English) | Description |
---|---|---|
create-option-text | “Add item:” | The text to be displayed on new buttom to Add item |
persistent-create-option | false | Decides if you can add any term, even if part of the term is also found, or only unique, not overlapping terms |
skip-no-results | false | with the skip_no_results option you can disable the 'No results match..’ message, which is somewhat redundant when option adding is enabled |
create-option | false | (true)Enable Create option or function(term) which works better with Angular Chosen (check example) |
To Create new option, follow:
.js
$scope.name = 'Multiple Angular Chosen Example add new option';
$scope.state = ['California', 'Arizona'];
$scope.states = [
'Alaska',
'Arizona',
'Arkansas',
'California'
];
$scope.createOption = function(term) {
$scope.$apply(function() {
$scope.states.push(term);
$scope.state.push(term);
});
}
.html
<select multiple
chosen
create-option-text="'Create item'"
persistent-create-option="true"
skip-no-results="true"
create-option="createOption"
ng-model="state"
ng-options="s for s in states">
<option value=""></option>
</select>
Translate
There are 3 attributes to translate messages. As an attribute directive, you should pass a variable or a Value between quotes.
Option | Default (English) | Description |
---|---|---|
no-results-text | “No results match” | The text to be displayed when no matching results are found. The current search is shown at the end of the text (e.g., No results match “Bad Search”). |
placeholder-text-multiple | “Select Some Options” | The text to be displayed as a placeholder when no options are selected for a multiple select. |
placeholder-text-single | “Select an Option” | The text to be displayed as a placeholder when no options are selected for a single select. |
Example in Brazilian Portuguese
<select multiple chosen
no-results-text="'Nenhum resultado encontrado para sua busca'"
placeholder-text-multiple="'Selecione as opções'"
ng-model="state.selected" ng-options="s for s in states">
<option value=""></option>
</select>
Features
- Works with
ngModel
andngOptions
- 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
Examples
Similar to $(“#states”).chosen()
Chosen attributes
Angular Chosen Example using <option> and <select> with Chosen attributes
Multiple Angular Chosen Example using ngModel and ngOptions
selected=“selected” from remote
<select ng-options="s.id as s.title for s in states">...</select>
<optgroup>
Group by
Translate
Example translated in Brazilian Portuguese Language
Multiple works better with object.child (dot)
As same as any <select multiple>, Angular works better with a object.child, or .(dot). Watch it: https://egghead.io/lessons/angularjs-the-dot Reference: http://stackoverflow.com/a/17607794/3415716
Create new item on no resuls match
Make sure you switch your Chosen to koenpunt/chosen one.