# Selects select.js

`mgcrea.ngStrap.select`

## Examples

Add quick, dynamic select functionality with any form text input.

#### Plugin dependency

Selects require the tooltip module and parseOptions helper module to be loaded.

### Live demo

    $scope.selectedIcon = {{ !selectedIcon ? '""' : selectedIcon}};
    $scope.selectedIcons = {{selectedIcons}};
    $scope.icons = {{icons}};

Single select:

Multiple select:

## Usage

Append a `bs-select`attribute to any element to enable the directive.

Available items are specified using the `bs-options` attribute. This attribute uses AngularJS ngOptions array data source syntax.

#### Breaking Change

If you are using AngularStrap prior to version 2.2.0, please use `ng-options` instead of `bs-options`.

#### The module exposes a `$select`service

Available for programmatic use (mainly in directives as it requires a DOM element).

              var mySelect = $select(element, controller);

### Options

Options can be passed via data-attributes on the directive or as an object hash to configure the service. For data attributes, append the option name to `data-`, as in `data-animation=""`.

#### This module supports exotic placement options!

You can position your select in corners (such as `bottom-left`) or any other combination two.

Exotic placement options are not part of the Bootstrap's core, to use them you must use `bootstrap-additions.css` from the BootstrapAdditions project. This project being not yet fully released, meanwhile, you can use the development snapshot compiled for theses docs.

Name | type | default | description
--- | --- | --- | ---
animation | string | am-fade | apply a CSS animation powered by `ngAnimate`
placement | string | 'bottom-left' | how to position the select - top | bottom | left | right | auto, or any combination like bottom-left or auto bottom-left. When "auto" is specified, it will dynamically reorient the select. For example, if placement is "auto left", the select will display to the left when possible, otherwise it will display right.
trigger | string | 'focus' | how select is triggered - click | hover | focus | manual
html | boolean | false | replace `ng-bind` with `ng-bind-html`, requires `ngSanitize` to be loaded
delay | number | object | 0 | delay showing and hiding the select (ms) - does not apply to manual trigger type If a number is supplied, delay is applied to both hide/show Object structure is: `delay: { show: 500, hide: 100 }`
container | string | false | false | Appends the select to a specific element. Example: `container: 'body'`. This option is particularly useful in that it allows you to position the select in the flow of the document near the triggering element - which will prevent the select from floating away from the triggering element during a window resize.
template | path | id | '$select' | If provided, overrides the default template, can be either a remote URL or a cached template id.
toggle | boolean | false | When true, an item can be deselected.
onShow | function |  | If provided, this function will be invoked after the select is shown.
onBeforeShow | function |  | If provided, this function will be invoked before the select is shown.
onHide | function |  | If provided, this function will be invoked after the select is hidden.
onBeforeHide | function |  | If provided, this function will be invoked before the select is hidden.
onSelect | function |  | If provided, this function will be invoked when an item is selected.
multiple | boolean | false | Whether multiple selections should be allowed.
all-none-buttons | boolean | false | Show the buttons to select and deselect all items at once.
allText | string | 'All' | Sets the text for the select all button.
noneText | string | 'None' | Sets the text for the select none button.
max-length | number | 3 | Maximum number of selected values that can be displayed inline.
max-length-html | string | 'selected' | Placeholder to append to an overflowed multiple selection.
sort | boolean | true | Sort the order of the displayed labels.
placeholder | string | 'Choose among the following...' | Placeholder text when no value is selected.
iconCheckmark | string | 'glyphicon glyphicon-ok' | CSS class for 'checkmark' icon.
id | string | '' | The select instance id for usage in event handlers.

#### Default options

You can override global defaults for the plugin with `$selectProvider.defaults`

              angular.module('myApp')
              .config(function($selectProvider) {
                angular.extend($selectProvider.defaults, {
                  animation: 'am-flip-x',
                  sort: false
                });
              })