ngSelect

Transform any HTML element on the page to selectable components.
Homepage:
6 people use it
Author: 811518?v=3 pc035860

ngSelect

Transform any HTML element on the page to selectable components.

Watch simple demos on Plunker:

AngularJS version support

Both stable(1.0.7)/unstable(1.1.5) branch are supported.

Getting started

Include the ngSelect module with AngularJS script in your page.

Add ngSelect to your app module's dependency.

Usage

ng-select

Type: scope varaible Default: undefined

Two-way binding target, the result might be null or [](with select-multiple). The model will receive the value from ng-select-option.

Live Example

ng-select-option

Type: string Default: undefined

Provides selection value for the model specified in ng-select. Special properties are exposed on the local scope of each ng-select-option instance, can be used in the evaluation of select-class, select-style, select-disabled expressions.

  • $optIndex - {number} - unique index of the option

  • $optValue - {*} - value of the option

  • $optSelected - {boolean} - whether the option is selected

select-class (optional)

Type: expression Default: undefined

Provides the exact same functionality as ng-class, but with the additional local scope applied with $optIndex, $optValue, $optSelected varaibles to increase the usage flexibility. This optional directive is also applicable to ng-select-option as local configuration.

Live Example

select-style (optional)

Type: expression Default: undefined

Provides the exact same functionality as ng-style, but with the additional local scope applied with $optIndex, $optValue, $optSelected varaibles to increase the usage flexibility. This optional directive is also applicable to ng-select-option as local configuration.

Live Example

select-disabled (optional)

Type: expression Default: undefined

Disables the interactivity of options if the expression is evaluated to be true. The evaluation has the access to the additional local scope with $optIndex, $optValue, $optSelected varaibles to increase the usage flexibility. This optional directive is also applicable to ng-select-option as local configuration.

Live Example

select-multiple (optional)

Type: boolean Default: false

Enables ng-select to support multiple selection, of which the model binded will be an array.

Live Example

Note

  1. Duplicate values in ng-select-option will cause strange behavior.

More demos

Dynamic-valued option

ng-select-option values can be changed dynamically, and stay binded with ng-select model. Try it by selecting the Other option in the demo and enter something in the text input.

comments powered by Disqus
This page was last updated over 3 years ago.