# AngularStrap

AngularJS 1.2+ native directives for Bootstrap 3.

# Getting started readme.md

`mgcrea.ngStrap`

#### About the project

AngularStrap is a set of native directives that enables seamless integration of Bootstrap#^3.0 into your AngularJS#^1.2 application.

With no external dependency except the Bootstrap CSS styles, AngularStrap is light and fast. It has been built from the ground up to leverage ngAnimate!

## Quick Start

Install and manage AngularStrap with Bower. You can also use NuGet. A CDN is also provided by cdnjs.com.

            $ bower install angular-strap --save

Load the required javascript libraries (Bootstrap scripts files are not needed).

            <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
            <script src="//cdnjs.cloudflare.com/ajax/libs/angular-strap/2.1.2/angular-strap.min.js"></script>
            <script src="//cdnjs.cloudflare.com/ajax/libs/angular-strap/2.1.2/angular-strap.tpl.min.js"></script>

Inject the `mgcrea.ngStrap`module into your application.

            angular.module('myApp', ['mgcrea.ngStrap']);

#### Why are there two angular-strap files?

AngularStrap provides two different files:

- angular-strap.js: library javascript code
- angular-strap.tpl.js: default HTML inline templates used by the directives

By keeping the HTML template definitions in a separate file, it makes it easier to customize the templates used by the directives by creating a custom copy of the file or by overriding some of the templates.

#### Custom builds

AngularStrap provides independently built modules that can be loaded separately

              angular.module('myApp', [ 'mgcrea.ngStrap.modal', 'mgcrea.ngStrap.aside', 'mgcrea.ngStrap.tooltip' ]);

## Contribute

Build and work on AngularStrap with Gulp.

            // Serve and watch docs, ideal to hack!
            $ gulp serve
            // Continuous integration
            $ gulp karma:server
            // Build AngularStrap
            $ gulp build

## Animations

AngularStrap leverages AngularJS `ngAnimate`module to provide animations to the directives. Therefore, it requires to load custom CSS code as `ngAnimate`comes with a very specific markup.

#### AngularMotion

Theses docs rely on the `angular-motion.css`stylesheet from the AngularMotion project.

              $ bower install angular-motion --save

# Modals modal.js

`mgcrea.ngStrap.modal`

## Examples

Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.

### Live demo clog.info

    $scope.modal = {{modal | json}};

#### Backdrop animation

Backdrop animation being powered by `ngAnimate`, it requires custom CSS.

            .modal-backdrop.am-fade {
              opacity: .5;
              transition: opacity .15s linear;
              &.ng-enter {
                opacity: 0;
                &.ng-enter-active {
                  opacity: .5;
                }
              }
              &.ng-leave {
                opacity: .5;
                &.ng-leave-active {
                  opacity: 0;
                }
              }
            }

## Usage

Append a `bs-modal`attribute to any element to activate the directive.

#### The module also exposes a `$modal`service

Available for programmatic use (inside a directive/controller).

              angular.module('myApp')
              .controller('DemoCtrl', function($scope, $modal) {
                // Show a basic modal from a controller
                var myModal = $modal({title: 'My Title', content: 'My Content', show: true});

                // Pre-fetch an external template populated with a custom scope
                var myOtherModal = $modal({scope: $scope, template: 'modal/docs/modal.demo.tpl.html', show: false});
                // Show when some event occurs (use $promise property to ensure the template has been loaded)
                $scope.showModal = function() {
                  myOtherModal.$promise.then(myOtherModal.show);
                };
              })

### 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=""`.

For directives, you can naturally inherit the contextual `$scope` or leverage a custom one with an AngularJS expression to evaluate as an object directly on the `bs-modal` attribute

Name | type | default | description
--- | --- | --- | ---
animation | string | am-fade | apply a CSS animation powered by ngAnimate
backdropAnimation | string | am-fade | apply a CSS animation to backdrop powered by ngAnimate
placement | string | 'top' | how to position the modal - top | bottom | center (requires custom CSS).
title | string | '' | default title value if `title`attribute isn't present
content | string | '' | default content value if `data-content`attribute isn't present
html | boolean | false | replace `ng-bind` with `ng-bind-html`, requires `ngSanitize` to be loaded
backdrop | boolean or the string `'static'` | true | Includes a modal-backdrop element. Alternatively, specify `static`for a backdrop which doesn't close the modal on click.
keyboard | boolean | true | Closes the modal when escape key is pressed
show | boolean | true | Shows the modal when initialized.
container | string | false | false | Appends the popover to a specific element. Example: `container: 'body'`. This option is particularly useful in that it allows you to position the popover in the flow of the document near the triggering element - which will prevent the popover from floating away from the triggering element during a window resize.
template | path | false | If provided, overrides the default template, can be either a remote URL or a cached template id. It should be a `div.modal` element following Bootstrap styles conventions (like this).
contentTemplate | path | false | If provided, fetches the partial and includes it as the inner content, can be either a remote URL or a cached template id.
prefixEvent | string | 'modal' | If provided, prefixes the events '.hide.before' '.hide' '.show.before' and '.show' with the passed in value. With the default value these events are 'modal.hide.before' 'modal.hide' 'modal.show.before' and 'modal.show'
id | string | '' | The modal instance id for usage in event handlers.

#### Default options

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

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

### Scope methods

Methods available inside the directive scope to toggle visibility.

#### $show()

Reveals the modal.

#### $hide()

Hides the modal.

#### $toggle()

Toggles the modal.

# Asides aside.js

`mgcrea.ngStrap.aside`

## Examples

Asides are custom panels, drawers that inherit the behavior of modals.

#### Plugin dependency

Asides require the modal plugin to be included.

### Live demo

    $scope.aside = {{aside | json}};

#### Custom styles required

Asides 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.

## Usage

Append a `bs-aside`attribute to any element to enable the plugin.

#### The module also exposes an `$aside`service

Available for programmatic use.

              angular.module('myApp')
              .controller('DemoCtrl', function($scope, $aside) {
                // Show a basic aside from a controller
                var myAside = $aside({title: 'My Title', content: 'My Content', show: true});

                // Pre-fetch an external template populated with a custom scope
                var myOtherAside = $aside({scope: $scope, template: 'aside/docs/aside.demo.tpl.html'});
                // Show when some event occurs (use $promise property to ensure the template has been loaded)
                myOtherAside.$promise.then(function() {
                  myOtherAside.show();
                })
              })

### 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=""`.

For directives, you can naturally inherit the contextual `$scope` or leverage a custom one with an AngularJS expression to evaluate as an object directly on the `bs-aside` attribute

Name | type | default | description
--- | --- | --- | ---
animation | string | am-fade-and-slide-right | apply a CSS animation powered by ngAnimate
placement | string | 'top' | how to position the modal - top | bottom | center (requires custom CSS).
title | string | '' | default title value if `title`attribute isn't present
content | string | '' | default content value if `data-content`attribute isn't present
html | boolean | false | replace `ng-bind` with `ng-bind-html`, requires `ngSanitize` to be loaded
backdrop | boolean or the string `'static'` | true | Includes a modal-backdrop element. Alternatively, specify `static`for a backdrop which doesn't close the modal on click.
keyboard | boolean | true | Closes the modal when escape key is pressed
show | boolean | true | Shows the modal when initialized.
container | string | false | false | Appends the popover to a specific element. Example: `container: 'body'`. This option is particularly useful in that it allows you to position the popover in the flow of the document near the triggering element - which will prevent the popover from floating away from the triggering element during a window resize.
template | path | false | If provided, overrides the default template, can be either a remote URL or a cached template id. It should be a `div.aside` element following Bootstrap styles conventions (like this).
contentTemplate | path | false | If provided, fetches the partial and includes it as the inner content, can be either a remote URL or a cached template id.

#### Default options

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

              angular.module('myApp')
              .config(function($asideProvider) {
                angular.extend($asideProvider.defaults, {
                  animation: 'am-fadeAndSlideLeft',
                  placement: 'left'
                });
              })

### Scope methods

Methods available inside the directive scope to toggle visibility.

#### $show()

Reveals the aside.

#### $hide()

Hides the aside.

#### $toggle()

Toggles the aside.

# Alerts alert.js

`mgcrea.ngStrap.alert`

## Examples

Alerts are styled tiny dialogs that inherit the behavior of modals.

#### Plugin dependency

Alerts require the modal plugin to be included.

### Live demo clog.info

    $scope.alert = {{alert | json}};

## Usage

Append a `bs-alert`attribute to any element to enable the plugin.

#### The module also exposes an `$alert`service

Available for programmatic use (inside a controller/directive).

              angular.module('myApp')
              .controller('DemoCtrl', function($scope, $alert) {
                var myAlert = $alert({title: 'Holy guacamole!', content: 'Best check yo self, you\'re not looking too good.', placement: 'top', type: 'info', show: true});
              })

### 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=""`.

For directives, you can naturally inherit the contextual `$scope` or leverage a custom one with an AngularJS expression to evaluate as an object directly on the `bs-aside` attribute

Name | type | default | description
--- | --- | --- | ---
animation | string | am-fade | apply a CSS animation powered by ngAnimate
placement | string | '' | how to position the alert - top | top-left | top-right (requires custom CSS).
title | string | '' | default title value if `title`attribute isn't present
content | string | '' | default content value if `data-content`attribute isn't present
type | string | 'info' | default content value if `data-type`attribute isn't present
show | boolean | true | Shows the alert when initialized.
container | string | false | false | Appends the alert to a specific element. Example: `container: 'body'`. This option is particularly useful in that it allows you to position the alert in the flow of the document near the triggering element - which will prevent the alert from floating away from the triggering element during a window resize.
template | path | false | If provided, overrides the default template, can be either a remote URL or a cached template id.
duration | number | false | false | If provided, the number of seconds the alert should be displayed for before it is automatically closed. Default keeps alert open until explicity closed.
dismissable | boolean | true | Make the alert dismissable by adding a close button (×).

#### Default options

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

              angular.module('myApp')
              .config(function($alertProvider) {
                angular.extend($alertProvider.defaults, {
                  animation: 'am-fade-and-slide-top',
                  placement: 'top'
                });
              })

### Scope methods

Methods available inside the directive scope to toggle visibility.

#### $show()

Reveals the alert.

#### $hide()

Hides the alert.

#### $toggle()

Toggles the alert.

# Tooltips tooltip.js

`mgcrea.ngStrap.tooltip`

## Examples

Add small overlays of content on hover, to any element for housing secondary information.

#### Plugin dependency

Tooltip require the helpers.dimensions module to be loaded.

### Live demo clog.info

Title

    $scope.tooltip = {{tooltip | json}};

Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown.

Check me to enable my tooltip

## Usage

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

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

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

              var myTooltip = $tooltip(element, {title: 'My Title'});

### 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=""`.

For directives, you can naturally inherit the contextual `$scope` or leverage a custom one with an AngularJS expression to evaluate as an object directly on the `bs-tooltip` attribute

#### This module supports exotic placement options!

You can position your popover 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 | 'top' | how to position the tooltip - top | bottom | left | right | auto, or any combination like bottom-left or auto bottom-left. When "auto" is specified, it will dynamically reorient the tooltip. For example, if placement is "auto left", the tooltip will display to the left when possible, otherwise it will display right.
trigger | string | 'hover focus' | how tooltip is triggered - click | hover | focus | manual
title | string | '' | default title value if `title`attribute isn't present
html | boolean | false | replace `ng-bind` with `ng-bind-html`, requires `ngSanitize` to be loaded
delay | number | object | 0 | delay showing and hiding the tooltip (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 tooltip to a specific element. Example: `container: 'body'`. This option is particularly useful in that it allows you to position the tooltip in the flow of the document near the triggering element - which will prevent the tooltip from floating away from the triggering element during a window resize.
target | string | DOMElement | false | false | Position the tooltip relative to a specific target element.
template | path | false | If provided, overrides the default template, can be either a remote URL or a cached template id. It should be a `div.tooltip` element following Bootstrap styles conventions (like this).
contentTemplate | path | false | If provided, fetches the partial and includes it as the inner content, can be either a remote URL or a cached template id.
prefixEvent | string | 'tooltip' | If provided, prefixes the events '.hide.before' '.hide' '.show.before' and '.show' with the passed in value. With the default value these events are 'tooltip.hide.before' 'tooltip.hide' 'tooltip.show.before' and 'tooltip.show'
id | string | '' | The tooltip instance id for usage in event handlers.
viewport | string | object | { selector: 'body', padding: 0 } | Keeps the tooltip within the bounds of this element. Example: viewport: '#viewport' or { "selector": "#viewport", "padding": 0 }

#### Default options

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

              angular.module('myApp')
              .config(function($tooltipProvider) {
                angular.extend($tooltipProvider.defaults, {
                  animation: 'am-flip-x',
                  trigger: 'hover'
                });
              })

### Helper attributes

Helper attributes can be used together with the directive via data-attributes to support specific functionality. Helper attributes support data binding. To use helper attributes, append the helper attribute name to `data-`, as in `data-bs-show="true"`.

Name | type | default | description
--- | --- | --- | ---
bsShow | boolean | string | false | shows or hides the tooltip. Supports boolean values or "true"/"false" string values. You can also specify "tooltip" to show just the tooltip when using several angular-strap directives on the same element.
bsEnabled | boolean | string | true | enables or disables the tooltip trigger. When the tooltip is disabled, calling show() will have no effect. Supports boolean values or "true" "false" "1" "0" string values.

### Scope methods

Methods available inside the directive scope to toggle visibility.

#### $show()

Reveals the tooltip.

#### $hide()

Hides the tooltip.

#### $toggle()

Toggles the tooltip.

#### $setEnabled(isEnabled)

Enables or disables the tooltip.

# Popovers popover.js

`mgcrea.ngStrap.popover`

## Examples

Add small overlays of content on tap, like those on the iPad, to any element for housing secondary information.

#### Plugin dependency

Popovers require the tooltip module to be loaded.

### Live demo clog.info

Title Content

    $scope.popover = {{popover | json}};

## Usage

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

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

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

              var myPopover = $popover(element, {title: 'My Title', content: 'My Content', trigger: 'manual'});

### 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=""`.

For directives, you can naturally inherit the contextual `$scope` or leverage a custom one with an AngularJS expression to evaluate as an object directly on the `bs-popover` attribute

#### This module supports exotic placement options!

You can position your popover 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 | 'right' | how to position the popover - top | bottom | left | right | auto, or any combination like bottom-left or auto bottom-left. When "auto" is specified, it will dynamically reorient the popover. For example, if placement is "auto left", the popover will display to the left when possible, otherwise it will display right.
trigger | string | 'click' | how popover is triggered - click | hover | focus | manual
title | string | '' | default title value if `title`attribute isn't present
content | string | '' | default content value if `data-content`attribute isn't present
html | boolean | false | replace `ng-bind` with `ng-bind-html`, requires `ngSanitize` to be loaded
delay | number | object | 0 | delay showing and hiding the popover (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 popover to a specific element. Example: `container: 'body'`. This option is particularly useful in that it allows you to position the popover in the flow of the document near the triggering element - which will prevent the popover from floating away from the triggering element during a window resize.
target | string | DOMElement | false | false | Position the tooltip relative to a specific target element.
template | path | false | If provided, overrides the default template, can be either a remote URL or a cached template id. It should be a `div.popover` element following Bootstrap styles conventions (like this).
contentTemplate | path | false | If provided, fetches the partial and includes it as the inner content, can be either a remote URL or a cached template id.
autoClose | boolean | false | If provided, auto closes the tooltip when clicking outside of it.
id | string | '' | The popover instance id for usage in event handlers.
viewport | string | object | { selector: 'body', padding: 0 } | Keeps the popover within the bounds of this element. Example: viewport: '#viewport' or { "selector": "#viewport", "padding": 0 }

#### Default options

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

              angular.module('myApp')
              .config(function($popoverProvider) {
                angular.extend($popoverProvider.defaults, {
                  animation: 'am-flip-x',
                  trigger: 'hover'
                });
              })

### Scope methods

Methods available inside the directive scope to toggle visibility.

#### $show()

Reveals the popover.

#### $hide()

Hides the popover.

#### $toggle()

Toggles the popover.

# Typeaheads typeahead.js

`mgcrea.ngStrap.typeahead`

## Examples

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

#### Plugin dependency

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

### Live demo

    $scope.selectedState = "{{selectedState}}";
    $scope.states = {{states}};

    $scope.selectedIcon = "{{selectedIcon}}";
    $scope.icons = "{{icons}}";

    $scope.selectedAddress = "{{selectedAddress}}";

State
Icon

Address (async via maps.googleapis.com)

## Usage

Append a `bs-typeahead`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 `$typeahead`service

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

              var myTypeahead = $typeahead(element, {controller: someModelController});

### 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 typeahead 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 typeahead - top | bottom | left | right | auto, or any combination like bottom-left or auto bottom-left. When "auto" is specified, it will dynamically reorient the typeahead. For example, if placement is "auto left", the typeahead will display to the left when possible, otherwise it will display right.
trigger | string | 'focus' | how typeahead 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 typeahead (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 typeahead to a specific element. Example: `container: 'body'`. This option is particularly useful in that it allows you to position the typeahead in the flow of the document near the triggering element - which will prevent the typeahead from floating away from the triggering element during a window resize.
template | path | id | '$typeahead' | If provided, overrides the default template, can be either a remote URL or a cached template id.
limit | number | 6 | The max number of items to display in the dropdown.
minLength | number | 1 | The minimum character length needed before triggering autocomplete suggestions.
autoSelect | boolean | false | Whether or not the first match will automatically be selected upon typing.
comparator | string | '' | The name of the comparator function which is used in determining a match.
id | string | '' | The typeahead instance id for usage in event handlers.
watchOptions | boolean | false | Whether or not the suggestions collection should be watched for changes.

#### Default options

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

              angular.module('myApp')
              .config(function($typeaheadProvider) {
                angular.extend($typeaheadProvider.defaults, {
                  animation: 'am-flip-x',
                  minLength: 2,
                  limit: 8
                });
              })

# Datepickers datepicker.js

`mgcrea.ngStrap.datepicker`

## Examples

Add datepicker functionality with any form text input.

#### Plugin dependency

Datepickers require the tooltip module and dateParser helper module to be loaded.

These docs currently use bootstrap-additions for styling purposes.

#### Support for locales

This module leverages the $locale service. You just have to load the proper i18n file to seamlessly translate your datepickers.

### Live demo

    $scope.selectedDate = {{selectedDate}}; // <- {{ getType('selectedDate') }}
    $scope.selectedDateAsNumber = {{selectedDateAsNumber}}; // <- {{ getType('selectedDateAsNumber') }}
    $scope.fromDate = {{fromDate}}; // <- {{ getType('fromDate') }}
    $scope.untilDate = {{untilDate}}; // <- {{ getType('untilDate') }}

Date (as date)
Date (as number)

Date range (dynamic)

## Usage

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

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

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

              var myDatepicker = $datepicker(element, ngModelController);

### 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 datepicker 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 these docs.

Name | type | default | description
--- | --- | --- | ---
animation | string | am-fade | apply a CSS animation powered by `ngAnimate`
placement | string | 'bottom-left' | how to position the datepicker - top | bottom | left | right | auto, or any combination like bottom-left or auto bottom-left. When "auto" is specified, it will dynamically reorient the datepicker. For example, if placement is "auto left", the datepicker will display to the left when possible, otherwise it will display right.
trigger | string | 'focus' | how datepicker 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 datepicker (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 datepicker to a specific element. Example: `container: 'body'`. This option is particularly useful in that it allows you to position the datepicker in the flow of the document near the triggering element - which will prevent the datepicker from floating away from the triggering element during a window resize.
template | path | id | '$datepicker' | If provided, overrides the default template, can be either a remote URL or a cached template id.
dateFormat | string | 'shortDate' | Rendering format of your date, leverages ng.filter:date.
modelDateFormat | string | null | Model format of your date, leverages ng.filter:date.
dateType | string | 'date' | Expected model type of your date - date | number | unix | iso | string If type is "number" then datepicker uses milliseconds to set date, if "unix" - seconds
timezone | string | null | Timezone of your date - UTC Right now, only "UTC" is supported.
autoclose | boolean | false | Whether the picker should close itself upon select.
useNative | boolean | false | Whether to use a native component if available (iOS/Android).
minDate | date* | -Infinity | Minimum allowed date for selection (* fed into the `Date` constructor). You can set this to the current date by passing the string "today" into the 'data-min-date' attribute, or by setting minDate to `new Date()` when configuring the provider defaults.
maxDate | date* | +Infinity | Maximum allowed date for selection (* fed into the `Date` constructor). You can set this to the current date by passing the string "today" into the 'data-max-date' attribute, or by setting maxDate to `new Date()` when configuring the provider defaults.
startView | number | 0 | View that sould be opened by default - 0 | 1 | 2.
minView | number | 0 | Minimum allowed view - 0 | 1 | 2. 1 will only allow month selection.
startWeek | number | 0 | First day of the week (0 - Sunday, 1 - Monday, 2 - Tuesday, etc.)
startDate | date* | today | Date that should be opened by default.
iconLeft | string | 'glyphicon glyphicon-chevron-left' | CSS class for 'left' icon.
iconRight | string | 'glyphicon glyphicon-chevron-right' | CSS class for 'right' icon.
daysOfWeekDisabled | string | '' | List of decimal days of the week values that are disabled and hence cannot be selected. For example, '06' disables Sunday and Saturday, '12345' disables Monday to Friday.
disabledDates | array of date ranges | [] | Array of date ranges to disable. Example date range: `{ start: new Date(2010, 11, 24), end: new Date(2010, 11, 25) }`

#### Default options

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

              angular.module('myApp')
              .config(function($datepickerProvider) {
                angular.extend($datepickerProvider.defaults, {
                  dateFormat: 'dd/MM/yyyy',
                  startWeek: 1
                });
              })

# Timepickers timepicker.js

`mgcrea.ngStrap.timepicker`

## Examples

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

#### Plugin dependency

Timepickers require the tooltip module and dateParser helper module to be loaded.

Theses docs currently use bootstrap-additions for styling purposes.

#### Support for locales

This module leverages the $locale service. You just have to load the proper i18n file to seamlessly translate your timepickers.

### Live demo

    $scope.time = {{time}}; // (formatted: {{time | date:'shortTime'}})
    $scope.selectedTimeAsNumber = {{selectedTimeAsNumber}}; // (formatted: {{selectedTimeAsNumber | date:'shortTime'}})
    $scope.sharedDate = {{sharedDate}}; // (formatted: {{sharedDate | date:'short'}})

Time (as date)
Time (as number)

Time picker with arrows

Datetime picker

## Usage

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

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

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

              var myTimepicker = $timepicker(element, ngModelController);

### 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 timepicker - top | bottom | left | right | auto, or any combination like bottom-left or auto bottom-left. When "auto" is specified, it will dynamically reorient the timepicker. For example, if placement is "auto left", the timepicker will display to the left when possible, otherwise it will display right.
trigger | string | 'focus' | how timepicker 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 timepicker (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 timepicker to a specific element. Example: `container: 'body'`. This option is particularly useful in that it allows you to position the timepicker in the flow of the document near the triggering element - which will prevent the timepicker from floating away from the triggering element during a window resize.
template | path | id | '$timepicker' | If provided, overrides the default template, can be either a remote URL or a cached template id.
timeFormat | string | 'shortTime' | Rendering format of your time, leverages ng.filter:date.
modelTimeFormat | string | null | Model format of your time, leverages ng.filter:date.
timeType | string | 'date' | Expected model type of your time - date | number | unix | iso | string If type is "number" then timepicker uses milliseconds to set date, if "unix" - seconds
autoclose | boolean | false | Whether the picker should close itself upon select.
useNative | boolean | true | Whether to use a native component if available (iOS/Android).
minTime | date* | -Infinity | Minimum allowed time for selection (parsed against current format). You can use the string "now" that will resolve the current time.
maxTime | date* | +Infinity | Maximum allowed time for selection (parsed against current format). You can use the string "now" that will resolve the current time.
length | number | 5 | Length of the timepicker (should be an odd number).
hourStep | number | 1 | Default step for hours.
minuteStep | number | 5 | Default step for minutes.
secondStep | number | 5 | Default step for seconds.
roundDisplay | boolean | false | Whether the picker should round the minute values displayed when no initial time is specified. The rounding is made by dividing time in minuteStep intervals and flooring the current time to the nearest.
iconUp | string | 'glyphicon glyphicon-chevron-up' | CSS class for 'up' icon.
iconDown | string | 'glyphicon glyphicon-chevron-down' | CSS class for 'down' icon.
arrowBehavior | string | 'pager' | Sets the behavior of the arrow buttons in the picker. 'pager' to move the displayed hour/minute options, 'picker' to change the current time hours/minutes value.

#### Default options

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

              angular.module('myApp')
              .config(function($timepickerProvider) {
                angular.extend($timepickerProvider.defaults, {
                  timeFormat: 'HH:mm',
                  length: 7
                });
              })

# Buttons button.js

`mgcrea.ngStrap.button`

## Examples

Do more with buttons. Control button states or create groups of buttons for more components like toolbars.

This modules exposes two directives: `bs-checkbox` and `bs-radio` that can be used as attributes to trigger toggle, checkbox or radio behavior.

#### Group directives are also available as shortcuts

Use `bs-checkbox-group` and `bs-radio-group` to easily setup the proper markup at compile time.

### Live demo clog.info

    $scope.button = {{button | json}};

Toggle:

Checkboxes:
Left Middle Right

Radios:
First Second Third

#### Type support

Theses directives can handle both `strings`, `numbers` and `booleans` values.

# 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}}";
    $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.
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
                });
              })

# Tabs tab.js

`mgcrea.ngStrap.tab`

## Examples

Add quick, dynamic tab functionality to transition through panes of local content.

### Live demo clog.info

    $scope.tabs = {{tabs | json}};
    $scope.tabs.activeTab = "{{ tabs.activeTab }}";

{{ tabs[2].disabled ? 'Enable' : 'Disable' }} third tab
Select "Profile" tab

Tab n°{{ $index + 1 }}
Add new tab

## Usage

Append a `bs-tabs` attribute to any element and several children `bs-pane` attributes to children elements to enable the directive.

#### ngModel binding

Using `ngModel` to bind to the active tab pane index is deprecated and may be removed in future versions, due to issues with validation when using the Tabs directive inside a `form` element.

Please use the helper attribute `bsActivePane` instead.

#### Custom animations

Pane animation is done with the `active` class and requires custom CSS. You can change the default `am-fade` animation class by including the `animation` option.

Here is a sample definition for the default `am-fade` animation class:

LESS:

    .tab-pane.am-fade {
      animation-duration: .3s;
      animation-timing-function: ease;
      animation-fill-mode: backwards;
      opacity: 1;

      &.active-remove {
        display: none !important;
      }
      &.active-add {
        animation-name: fadeIn;
      }
    }

CSS:

    .tab-pane.am-fade {
      animation-duration: .3s;
      animation-timing-function: ease;
      animation-fill-mode: backwards;
      opacity: 1;
    }

    .tab-pane.am-fade.active-remove {
      display: none !important;
    }

    .tab-pane.am-fade.active-add {
      animation-name: fadeIn;
    }

### Options

Options can be passed via data attributes or as an AngularJS expression to evaluate as an object on `bs-tabs` or `bs-pane`. For data attributes, append the option name to `data-`, as in `data-animation=""`.

#### bs-tabs options

Name | type | default | description
--- | --- | --- | ---
animation | string | am-fade | Apply a CSS animation to tab panes with `ngAnimate`
template | path | false | If a remote URL is provided, overrides the default template
navClass | string | nav-tabs | Classes to be applied to the tab navigation (bootstrap supports `nav-pills`, `nav-stacked`)
activeClass | string | active | Class to be applied to the animated element

#### bs-pane options

Name | type | default | description
--- | --- | --- | ---
disabled | string | false | Disable pane
name | string | '' | Tab name. If provided, it will be used for `bsActivePane` instead of number

#### Default options

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

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

### Helper attributes

Helper attributes can be used together with the directive via data-attributes to support specific functionality. Helper attributes support data binding. To use helper attributes, append the helper attribute name to `data-`, as in `data-bs-active-pane="tabs.activeTab"`.

Name | type | description
--- | --- | ---
bsActivePane | number | Info about current selected tab. If it has the name, it will be here, otherwise – active tab pane index (zero based). You can use it to set the active tab pane from code or to get the currently active tab pane.

# Collapses collapse.js

`mgcrea.ngStrap.collapse`

## Examples

Add quick, dynamic collapsable functionality to transition through panels of local content.

### Live demo clog.info

    $scope.panels = {{panels | json}};
    $scope.panels.activePanel = {{ panels.activePanel }};

#### {{ panel.title }}

{{ panel.body }}
Panel n°{{ $index + 1 }}
Add new panel

### Multiple open panels sample

By using the `allowMultiple` option, you can have multiple open panels at the same time. When using `allowMultiple` option, `ngModel` binds to an array with the open panel indexes.

    $scope.multiplePanels.activePanels = {{ multiplePanels.activePanels }};

#### {{ panel.title }}

{{ panel.body }}

## Usage

Append a `bs-collapse` attribute to any element and several `bs-collapse-toggle`,`bs-collapse-target` attributes to children elements to enable the directive.

#### Custom animations

Pane animation is done with the `active` class and requires custom CSS.

    .collapse.am-collapse {
      animation-duration: .3s;
      animation-timing-function: ease;
      animation-fill-mode: backwards;
      overflow: hidden;
      &.in-remove {
        animation-name: collapse;
        display: block;
      }
      &.in-add {
        animation-name: expand;
      }
    }

### Options

Options can be passed via data attributes or as an AngularJS expression to evaluate as an object on `bs-collapse`. For data attributes, append the option name to `data-`, as in `data-animation=""`.

`bs-collapse-toggle` can be hard mapped to a `bs-collapse-target` by passing its target index to the attribute (`bs-collapse-toggle="1"`)

Name | type | default | description
--- | --- | --- | ---
animation | string | am-fade | apply a CSS animation to the popover with `ngAnimate`
activeClass | string | in | Class to be applied to the animated element
disallowToggle | boolean | false | Prevents elements from being collapsed by clicking its toggle element, i.e., a panel can only be closed by opening another panel.
startCollapsed | boolean | false | Start with all elements collapsed
allowMultiple | boolean | false | Allow multiple open panels

#### Default options

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

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

# Dropdowns dropdown.js

`mgcrea.ngStrap.dropdown`

## Examples

Add dropdown menus to nearly anything with this simple plugin, including the navbar, tabs, and pills.

Append a `bs-dropdown` attribute to any element to enable the plugin.

#### Plugin dependency

Dropdowns require the tooltip plugin to be included.

### Live demo clog.info

    $scope.dropdown = {{dropdown | json}};

## Usage

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

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

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

              var myDropdown = $dropdown(element, {scope: {content: [{text:'foo', href:'', click:''}, ...]});

### 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=""`.

For directives, you can naturally inherit the contextual `$scope` or leverage a custom one with an AngularJS expression to evaluate as an object directly on the `bs-dropdown` attribute

#### This module supports exotic placement options!

You can position your dropdown 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 dropdown - top | bottom | left | right | auto, or any combination like bottom-left or auto bottom-left. When "auto" is specified, it will dynamically reorient the dropdown. For example, if placement is "auto left", the dropdown will display to the left when possible, otherwise it will display right.
trigger | string | 'click' | how dropdown 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 dropdown (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 dropdown to a specific element. Example: `container: 'body'`. This option is particularly useful in that it allows you to position the dropdown in the flow of the document near the triggering element - which will prevent the dropdown from floating away from the triggering element during a window resize.
template | path | false | If provided, overrides the default template, can be either a remote URL or a cached template id.

#### Default options

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

              angular.module('myApp')
              .config(function($dropdownProvider) {
                angular.extend($dropdownProvider.defaults, {
                  animation: 'am-flip-x',
                  trigger: 'hover'
                });
              })

# Navbar navbar.js

`mgcrea.ngStrap.navbar`

## Examples

Add quick, dynamic navbar functionality to transition through active/inactive states.

### Live demo

    $location.path() = "{{$location.path()}}";

## Usage

Append a `bs-navbar`attribute to any element to activate the directive.

Use `data-match-route` attributes to any children navigation item that should be toggled active.

#### Heads up!

The directives also supports `HTML5 mode`, you just have to drop the `href` dashes.

### Options

Options can be passed via data attributes, append the option name to `data-`, as in `data-route-attr=""`.

Name | type | default | description
--- | --- | --- | ---
activeClass | string | active | Class to apply when the navigation item is active
routeAttr | string | data-match-route | Attribute to test against `$location.path()`

#### Default options

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

              angular.module('myApp')
              .config(function($navbarProvider) {
                angular.extend($navbarProvider.defaults, {
                  activeClass: 'in'
                });
              })

# Scrollspy scrollspy.js

`mgcrea.ngStrap.scrollspy`

## Examples

The subnavigation on the left is a live demo of the scrollspy plugin.

#### Plugin dependency

Scrollspy require the helpers.dimensions module to be loaded.

            <ul class="nav bs-sidenav">
              <li data-target="#modals" bs-scrollspy>
                <a href="#modals">Modal</a>
                <ul class="nav">
                  <li data-target="#modals-examples" bs-scrollspy><a href="#modals-examples">Examples</a></li>
                  <li data-target="#modals-usage" bs-scrollspy><a href="#modals-usage">Usage</a></li>
                </ul>
              </li>
            </ul>

            <ul class="nav bs-sidenav" bs-scrollspy-list>
              <li>
                <a href="#modals">Modal</a>
                <ul class="nav">
                  <li><a href="#modals-examples">Examples</a></li>
                  <li><a href="#modals-usage">Usage</a></li>
                </ul>
              </li>
            </ul>

## Usage

Append a `bs-scrollspy`attribute to any element to enable the plugin.

#### The module also exposes an `$scrollspy`service

Available for programmatic use (mainly inside a directive as it requires an element).

              var scrollspy = $scrollspy(element, options);

### 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=""`.

Name | type | default | description
--- | --- | --- | ---
target | string | '' | Required target selector.
offset | number | 0 | Pixels to offset from top of screen when calculating position of scroll.

#### Default options

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

              angular.module('myApp')
              .config(function($scrollspyProvider) {
                angular.extend($scrollspyProvider.defaults, {
                  animation: 'am-fade-and-slide-top',
                  placement: 'top'
                });
              })

# Affix affix.js

`mgcrea.ngStrap.affix`

## Examples

The subnavigation on the left is a live demo of the affix plugin.

#### Plugin dependency

Affix require the helpers.dimensions module to be loaded.

            <div class="bs-sidebar hidden-print" role="complementary" data-offset-top="-80" bs-affix></div>

## Usage

Append a `bs-affix`attribute to any element to enable the plugin.

You can affix inside a custom container with the `bs-affix-target` attribute added to any parent element.

#### The module also exposes an `$affix`service

Available for programmatic use (mainly inside a directive as it requires an element).

              var affix = $affix(element, options);

### 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-offset-top=""`.

Name | type | default | description
--- | --- | --- | ---
offsetTop | number | 0 | Pixels to offset from top of screen when calculating position of scroll.
offsetBottom | number | 0 | Pixels to offset from bottom of screen when calculating position of scroll.
offsetParent | number | 0 | Pixels to offset from parent when calculating position of scroll.
offsetUnpin | number | 0 | Pixels to offset from unpin position when calculating position of scroll.

#### Default options

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

              angular.module('myApp')
              .config(function($affixProvider) {
                angular.extend($affixProvider.defaults, {
                  offsetTop: 100
                });
              })