Angular Chosen Localytics

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

Note: Switch from _ to -

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. Note: this is for multiple selects only. In single selects, the selected result will always be displayed.
`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)

More details

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>

Translate Example

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

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.