View on GitHub

Angular Chosen

Use Chosen drop down with AngularJS

Download this project as a .zip file Download this project as a tar.gz file

Angular-Chosen is an angular directive that can be used to convert select boxes to a more user-friendly chosen drop downs.

Standard Select

Turns this

Code:

<select ng-model="data.country"
  ng-options="country.code as country.name
      for country in countries">
</select>

Into this

 

<select chosen
    option="countries"
  ng-model="data.country"
  ng-options="country.code as country.name
      for country in countries">
</select>

Multiple Select

Turns this

Code:

<select multiple ng-model="data.country"
  ng-options="country.code as country.name
      for country in countries">
</select>

Into this

<select chosen multiple
    options="countries"
  ng-model="data.country"
  ng-options="country.code as country.name
      for country in countries">
</select>

How to use:

Include jQuery in your html

<!-- include the js -->
<script src="path/to/jquery.min.js"></script>

Include Chosen in your html file

<!-- include the js -->
<script src="path/to/chosen-library/chosen.min.js"></script>

<!-- include the css and sprite -->
<link rel="stylesheet" href="path/to/chosen-library/chosen.min.css">
<link rel="image_src" href="path/to/chosen-library/chosen-sprite.png">

<!-- include angular -->
<script src="path/to/angular/angular.min.js"></script>

<!-- include angular-chosen -->
<script src="path/to/angular-chosen.js"></script>

You can also use a CDN, for example

<!-- include the js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.min.js"></script>

<!-- include the css and sprite -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.min.css">
<link rel="image_src" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen-sprite.png">

<!-- include angular -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>

<!-- include angular-chosen -->
<script src="path/to/angular-chosen.js"></script>

Add angular.chosen as a dependency in your angular projects module

angular.module('yourModule', ['angular.chosen']);

That's it you're good to go !!

Options:

  • model: the property in the scope to which the drop downs value is binded to. Same as ng-model

  • options: the list of options the drop-down will have. Same as the array/object passed in ng-options

  • max-selection: Used to set the chosen option max_selected_options for multiple select.

  • search-threshold: Used to set the chosen option disable_search_threshold.

Events:

  • onChange: 'on-change'

    The on-change attribute will execute the function assigned to it when the chosen fires the 'change' event.

    <select chosen options="countries" on-change="doStuff"
    ng-model="data.country"
    ng-options="country.code as country.name for country in countries">
</select>

  • onReady: on-ready

    The on-ready attribute will execute the function assigned to it when the chosen fires the 'chosen:ready' event.

    <select chosen options="countries" on-ready="doStuff"
    ng-model="data.country"
    ng-options="country.code as country.name for country in countries">
</select>

  • onMaxSelected: on-max-selected

    The on-max-selected attribute will execute the function assigned to it when the chosen fires the 'chosen:maxselected' event.

    <select chosen multiple options="countries" max-selection="3" on-max-selected="doStuff"
    ng-model="data.country"
    ng-options="country.code as country.name for country in countries">
</select>

    Example:

    You cannot add more countries to the list

  • onShowDropdown: on-show-dropdown

    The on-show-dropdown attribute will execute the function assigned to it when the chosen fires the 'chosen:showing_dropdown' event.

    <select chosen options="countries" on-show-dropdown="doStuff"
    ng-model="data.country"
    ng-options="country.code as country.name for country in countries">
</select>

    Example:

    Drop down was opened.

  • onHideDropdown: on-hide-dropdown

    The on-hide-dropdown attribute will execute the function assigned to it when the chosen fires the 'chosen:hiding_dropdown' event.

    <select chosen options="countries" on-hide-dropdown="doStuff"
    ng-model="data.country"
    ng-options="country.code as country.name for country in countries">
</select>

    Example:

    Drop down was closed.

  • onNoResult: on-no-result

    The on-no-result attribute will execute the function assigned to it when the chosen fires the 'chosen:no_results' event.

    <select chosen options="countries" on-no-result="doStuff"
    ng-model="data.country"
    ng-options="country.code as country.name for country in countries">
</select>