AngularStrap

AngularJS 1.2+ native directives for Bootstrap 3.

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!

AngularStrap is tested against the latest patch release of the 1.2, 1.3 and 1.4 branches.

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.5.8/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-strap/v2.3.8/angular-strap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-strap/v2.3.8/angular-strap.tpl.min.js"></script>

Inject the mgcrea.ngStrapmodule 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 ngAnimatemodule to provide animations to the directives. Therefore, it requires to load custom CSS code as ngAnimatecomes with a very specific markup.

AngularMotion

Theses docs rely on the angular-motion.cssstylesheet from the AngularMotion project.

        $ bower install angular-motion --save

      

Examples

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

Live demo plunker

$scope.modal = {
  "title": "Title",
  "content": "Hello Modal<br />This is a multiline message!"
};
<!-- Button to trigger a default modal with a scope as an object {title:'', content:'', etc.} -->
<button type="button" class="btn btn-lg btn-primary" data-animation="am-fade-and-scale" data-placement="center" bs-modal="modal">Click to toggle modal
  <br>
  <small>(using an object)</small>
</button>

<!-- You can use a custom html template with the `data-template` attr -->
<button type="button" class="btn btn-lg btn-danger" data-animation="am-fade-and-slide-top" data-template-url="modal/docs/modal.demo.tpl.html" bs-modal="modal">Custom Modal
  <br>
  <small>(using data-template)</small>
</button>

<!-- You can use a custom html template with the `data-template` attr -->
<button type="button" class="btn btn-lg btn-danger" ng-click="showModal()">Modal
  <br>
  <small>(using service)</small>
</button>

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-modalattribute to any element to activate the directive.

The module also exposes a $modalservice

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 titleattribute isn't present
content string '' default content value if data-contentattribute 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 staticfor 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.

controller string|function false

Controller fn that should be associated with newly created scope or the name of a registered controller if passed as a string.

controllerAs string false

A controller alias name. If present the controller will be published to scope under the `controllerAs` name.

resolve object false

Object containing dependencies that will be injected into the controller's constructor when all the dependencies have resolved. The controller won't load if the promise is rejected.

locals object false

Object containing dependencies that will be injected into the controller's constructor. Similar to resolve but expects literal values instead of promises.

template string ''

Provide an html template as a string (when templateUrl is falsy).

templateUrl path 'modal/modal.tpl.html'

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.
onShow function

If provided, this function will be invoked after the modal is shown.

onBeforeShow function

If provided, this function will be invoked before the modal is shown.

onHide function

If provided, this function will be invoked after the modal is hidden.

onBeforeHide function

If provided, this function will be invoked before the modal is hidden.

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.

Examples

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

Plugin dependency

Asides require the modal plugin to be included.

Live demo plunker

$scope.aside = {
  "title": "Title",
  "content": "Hello Aside<br />This is a multiline message!"
};
<!-- Button to trigger a default aside with a scope as an object {title:'', content:'', etc.} -->
<button type="button" class="btn btn-lg btn-primary" bs-aside="aside">Click to toggle aside
  <br>
  <small>(using an object)</small>
</button>

<!-- You can use a custom html template with the `data-template` attr -->
<button type="button" class="btn btn-lg btn-danger" data-template-url="aside/docs/aside.demo.tpl.html" data-placement="left" data-animation="am-slide-left" bs-aside="aside" data-container="body">Custom aside
  <br>
  <small>(using data-template)</small>
</button>

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-asideattribute to any element to enable the plugin.

The module also exposes an $asideservice

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 titleattribute isn't present
content string '' default content value if data-contentattribute 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 staticfor 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.

controller string|function false

Controller fn that should be associated with newly created scope or the name of a registered controller if passed as a string.

controllerAs string false

A controller alias name. If present the controller will be published to scope under the `controllerAs` name.

template string ''

Provide an html template as a string (when templateUrl is falsy).

templateUrl path 'aside/aside.tpl.html'

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

onShow function

If provided, this function will be invoked after the aside is shown.

onBeforeShow function

If provided, this function will be invoked before the aside is shown.

onHide function

If provided, this function will be invoked after the aside is hidden.

onBeforeHide function

If provided, this function will be invoked before the aside is hidden.

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.

Examples

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

Plugin dependency

Alerts require the modal plugin to be included.

Live demo plunker

$scope.alert = {
  "title": "Holy guacamole!",
  "content": "Best check yo self, you're not looking too good.",
  "type": "info"
};

<!-- Button to trigger a default alert with a scope as an object {title:'', content:'', etc.} -->
<button class="btn btn-lg btn-primary" data-placement="top-right" data-container="body" data-duration="3" bs-alert="alert">Click to toggle alert
  <br>
  <small>(using an object)</small>
</button>

<!-- You can also use data-attrs to assign scope variables -->
<button class="btn btn-lg btn-primary" title="{{alert.title}}" data-content="{{alert.content}}" data-type="success" data-container="#alerts-container" bs-alert>Click to toggle alert
  <br>
  <small>(using data-attrs)</small>
</button>

<!-- You can use a custom html template with the `data-template` attr -->
<button class="btn btn-lg btn-danger" data-template="alert/docs/alert.demo.tpl.html" data-placement="top" data-duration="3" data-animation="am-fade-and-slide-top" data-container="body" data-keyboard="true" bs-alert="alert">Custom alert
  <br>
  <small>(using data-template)</small>
</button>

<!-- Element container to append the first alert -->
<hr>
<div id="alerts-container"></div>

Usage

Append a bs-alertattribute to any element to enable the plugin.

The module also exposes an $alertservice

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 titleattribute isn't present
content string '' default content value if data-contentattribute isn't present
type string 'info' default content value if data-typeattribute 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.

controller string|function false

Controller fn that should be associated with newly created scope or the name of a registered controller if passed as a string.

controllerAs string false

A controller alias name. If present the controller will be published to scope under the `controllerAs` name.

template string ''

Provide an html template as a string (when templateUrl is falsy).

templateUrl path 'alert/alert.tpl.html'

If provided, overrides the default template, can be either a remote URL or a cached template id.

It should be a div.alert element following Bootstrap styles conventions (like this).

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 (×).

onShow function

If provided, this function will be invoked after the alert is shown.

onBeforeShow function

If provided, this function will be invoked before the alert is shown.

onHide function

If provided, this function will be invoked after the alert is hidden.

onBeforeHide function

If provided, this function will be invoked before the alert is hidden.

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.

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 plunker

$scope.tooltip = {
  "title": "Hello Tooltip<br />This is a multiline message!",
  "checked": false
};

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

<!-- Markup for a default tooltip with a scope passed as an object {title:''} -->
<p>Tight pants next level keffiyeh <a href data-animation="am-flip-x" bs-tooltip="tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown.</p>

<div class="input-group col-xs-5">
  <span class="input-group-btn">
    <!-- You can also use data-attrs to assign scope variables -->
    <button class="btn btn-primary" type="button" data-trigger="click" data-type="success" data-title="{{tooltip.title}}" bs-tooltip>Click me</button>
  </span>
  <input type="text" class="form-control" data-placement="right" data-type="info" data-container="body" placeholder="Focus to toggle tooltip" data-trigger="focus" bs-tooltip="tooltip">
</div>
<div class="checkbox">
  <label data-placement="bottom-left" data-type="info" data-animation="am-fade-and-scale" bs-tooltip="tooltip" bs-enabled="tooltip.checked">
    <input type="checkbox" ng-model="tooltip.checked"> Check me to enable my tooltip
  </label>
</div>

Usage

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

The module exposes a $tooltipservice

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 | contextmenu | manual
title string '' default title value if titleattribute 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 string ''

Provide an html template as a string (when templateUrl is falsy).

templateUrl path 'tooltip/tooltip.tpl.html'

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

titleTemplate 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.
onShow function

If provided, this function will be invoked after the tooltip is shown.

onBeforeShow function

If provided, this function will be invoked before the tooltip is shown.

onHide function

If provided, this function will be invoked after the tooltip is hidden.

onBeforeHide function

If provided, this function will be invoked before the tooltip is hidden.

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.

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 plunker

$scope.popover = {
  "title": "Title",
  "content": "Hello Popover<br />This is a multiline message!"
};
<!-- Button to trigger a default popover with a scope as an object {title:'', content:'', etc.} -->
<button type="button" class="btn btn-lg btn-primary" data-placement="bottom" data-animation="am-flip-x" bs-popover="popover">Click to toggle popover
  <br>
  <small>(using an object)</small>
</button>

<!-- You can also use data-attrs to assign scope variables -->
<button type="button" class="btn btn-lg btn-primary" data-placement="top-right" title="{{popover.title}}" data-content="{{popover.content}}" data-trigger="focus" bs-popover>Click to toggle popover
  <br>
  <small>(using data-attrs)</small>
</button>

<!-- You can use a custom html template with the `data-template` attr -->
<button type="button" class="btn btn-lg btn-danger" title="{{popover.title}}" data-content="{{popover.content}}" data-template-url="popover/docs/popover.demo.tpl.html" data-animation="am-flip-x" data-auto-close="1" bs-popover>Custom Popover
  <br>
  <small>(using data-template)</small>
</button>

<!-- A popover can also be triggered programmatically using the $popover service -->
<button type="button" id="popover-as-service" class="btn btn-lg btn-primary" title="{{popover.title}}" ng-click="togglePopover()">Click to toggle popover
  <br>
  <small>(using $popover service)</small>
</button>

Usage

Append a bs-popoverattribute to any element to enable the directive.

The module exposes a $popoverservice

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 titleattribute isn't present
content string '' default content value if data-contentattribute 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 string ''

Provide an html template as a string (when templateUrl is falsy).

templateUrl path 'popover/popover.tpl.html'

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.
onShow function

If provided, this function will be invoked after the popover is shown.

onBeforeShow function

If provided, this function will be invoked before the popover is shown.

onHide function

If provided, this function will be invoked after the popover is hidden.

onBeforeHide function

If provided, this function will be invoked before the popover is hidden.

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.

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 plunker

$scope.selectedState = "";
$scope.states = ["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Dakota","North Carolina","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"];

$scope.selectedIcon = "";
$scope.icons = "[{"value":"Gear","label":"<i class=\"fa fa-gear\"></i> Gear"},{"value":"Globe","label":"<i class=\"fa fa-globe\"></i> Globe"},{"value":"Heart","label":"<i class=\"fa fa-heart\"></i> Heart"},{"value":"Camera","label":"<i class=\"fa fa-camera\"></i> Camera"}]";

$scope.selectedAddress = "";

<form class="form-inline" role="form">
  <div class="form-group">
    <label><i class="fa fa-globe"></i> State</label>
    <input type="text" class="form-control" ng-model="selectedState" bs-options="state for state in states" placeholder="Enter state" bs-typeahead>
  </div>
  <div class="form-group">
    <label>Icon</label>
    <input type="text" class="form-control" ng-model="selectedIcon" data-min-length="0" data-html="1" data-auto-select="true" data-animation="am-flip-x" bs-options="icon as icon.label for icon in icons" placeholder="Enter icon" bs-typeahead>
  </div>
  <hr>
  <!-- Using an async data provider -->
  <div class="form-group">
    <label><i class="fa fa-home"></i> Address <small>(async via maps.googleapis.com)</small></label>
    <input type="text" class="form-control" ng-model="selectedAddress" data-animation="am-flip-x" bs-options="address.formatted_address as address.formatted_address for address in getAddress($viewValue)" placeholder="Enter address" bs-typeahead>
  </div>
</form>

Usage

Append a bs-typeaheadattribute 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 $typeaheadservice

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.
trimValue boolean true If provided and set to false, overrides the default behavior of automatically trimming spaces from inputs. (Added in 2.2.4)
onShow function

If provided, this function will be invoked after the typeahead dropdown is shown.

onBeforeShow function

If provided, this function will be invoked before the typeahead dropdown is shown.

onHide function

If provided, this function will be invoked after the typeahead dropdown is hidden.

onBeforeHide function

If provided, this function will be invoked before the typeahead dropdown is hidden.

onSelect function

If provided, this function will be invoked when an item is selected.

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
  });
})

      

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 plunker

$scope.selectedDate = "2024-11-23T15:57:56.942Z"; // <- [object Date]
$scope.selectedDateAsNumber = 509414400000; // <- [object Number]
$scope.fromDate = ; // <- [object Undefined]
$scope.untilDate = ; // <- [object Undefined]


<form name="datepickerForm" class="form-inline" role="form">
  <!-- Basic example -->
  <div class="form-group" ng-class="{'has-error': datepickerForm.date.$invalid}">
    <label class="control-label"><i class="fa fa-calendar"></i> Date <small>(as date)</small></label>
    <input type="text" class="form-control" ng-model="selectedDate" name="date" bs-datepicker>
  </div>
  <!-- Custom example -->
  <div class="form-group" ng-class="{'has-error': datepickerForm.date2.$invalid}">
    <label class="control-label"><i class="fa fa-calendar"></i> Date <small>(as number)</small></label>
    <input type="text" class="form-control" ng-model="selectedDateAsNumber" data-date-format="yyyy-MM-dd" data-date-type="number" data-min-date="02/10/86" data-max-date="today" data-autoclose="1" name="date2" bs-datepicker>
  </div>
  <hr>
  <!-- Date range example -->
  <div class="form-group">
    <label class="control-label"><i class="fa fa-calendar"></i> <i class="fa fa-arrows-h"></i> <i class="fa fa-calendar"></i> Date range <small>(dynamic)</small></label><br>
    <div class="form-group col-xs-6">
      <input type="text" class="form-control" ng-model="fromDate" data-max-date="{{untilDate}}" placeholder="From" bs-datepicker>
    </div>
    <div class="form-group col-xs-6">
      <input type="text" class="form-control" ng-model="untilDate" data-min-date="{{fromDate}}" placeholder="Until" bs-datepicker>
    </div>
  </div>
</form>

Usage

Append a bs-datepickerattribute to any element to enable the directive.

The module exposes a $datepickerservice

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.

onShow function

If provided, this function will be invoked after the datepicker is shown.

onBeforeShow function

If provided, this function will be invoked before the datepicker is shown.

onHide function

If provided, this function will be invoked after the datepicker is hidden.

onBeforeHide function

If provided, this function will be invoked before the datepicker is hidden.

dateFormat string 'shortDate'

Rendering format of your date, leverages ng.filter:date.

modelDateFormat string null

Model format of your date, leverages ng.filter:date. You should also set dateType to string to use this option.

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 - null, UTC

"UTC" for UTC or null for local timezone.

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
  });
})

      

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 plunker

$scope.time = "1970-01-01T10:30:40.000Z"; // (formatted: 10:30 AM)
$scope.selectedTimeAsNumber = 37840000; // (formatted: 10:30 AM)
$scope.sharedDate = "2024-11-23T15:00:00.949Z"; // (formatted: 11/23/24 3:00 PM)
  




<form name="timepickerForm" class="form-inline" role="form">

  <!-- Basic example -->
  <div class="form-group" ng-class="{'has-error': timepickerForm.time.$invalid}">
    <label class="control-label"><i class="fa fa-clock-o"></i> Time <small>(as date)</small></label>
    <input type="text" class="form-control" size="8" ng-model="time" name="time" bs-timepicker>
  </div>

  <!-- Custom example -->
  <div class="form-group" ng-class="{'has-error': timepickerForm.time2.$invalid}">
    <label class="control-label"><i class="fa fa-clock-o"></i> Time <small>(as number)</small></label>
    <input type="text" class="form-control" size="8" ng-model="selectedTimeAsNumber" data-time-format="HH:mm:ss" data-time-type="number" data-min-time="10:00:00" data-max-time="13:30:00" data-autoclose="1" name="time2" bs-timepicker>
  </div>
  <hr>

  <!-- Time picker with arrows example -->
  <div class="form-group">
    <label class="control-label"><i class="fa fa-clock-o"></i> Time picker with arrows</label><br>
    <div class="form-group">
    <input type="text" class="form-control" size="8" ng-model="time" name="time" bs-timepicker data-time-format="HH:mm" data-length="1" data-minute-step="1" data-arrow-behavior="picker">
    </div>
  </div>
  <hr>

  <!-- Datetime example -->
  <div class="form-group">
    <label class="control-label"><i class="fa fa-calendar"></i> Datetime picker</label><br>
    <div class="form-group">
      <input type="text" size="10" class="form-control" ng-model="sharedDate" data-autoclose="1" placeholder="Date" bs-datepicker>
    </div>
    <div class="form-group">
      <input type="text" size="8" class="form-control" ng-model="sharedDate" data-time-format="h:mm:ss a" data-autoclose="1" placeholder="Time" bs-timepicker>
    </div>
  </div>

</form>

Usage

Append a bs-timepickerattribute to any element to enable the directive.

The module exposes a $timepickerservice

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.

onShow function

If provided, this function will be invoked after the timepicker is shown.

onBeforeShow function

If provided, this function will be invoked before the timepicker is shown.

onHide function

If provided, this function will be invoked after the timepicker is hidden.

onBeforeHide function

If provided, this function will be invoked before the timepicker is hidden.

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
  });
})

      

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 plunker

$scope.button = {
  "toggle": false,
  "checkbox": {
    "left": false,
    "middle": true,
    "right": false
  },
  "radio": "left"
};


<label>Toggle:</label>
<button type="button" class="btn btn-default" ng-model="button.toggle" bs-checkbox>Toggle</button>
<!-- You can also use custom values with the `data-true-value` & `data-false-value` attributes -->

<hr><label>Checkboxes:</label>
<div class="btn-group" ng-model="button.checkbox" bs-checkbox-group>
  <label class="btn btn-default"><input type="checkbox" value="left"> Left</label>
  <label class="btn btn-default"><input type="checkbox" value="middle"> Middle</label>
  <label class="btn btn-default"><input type="checkbox" value="right"> Right</label>
  <!-- Children get compiled by `bs-checkbox-group` to :
  <label class="btn btn-default"><input type="checkbox" value="left" ng-model="button.checkbox.left" bs-checkbox> Left</label>
  ...
  -->
</div>

<hr><label>Radios:</label>
<div class="btn-group" ng-model="button.radio" bs-radio-group>
  <label class="btn btn-default"><input type="radio" class="btn btn-default" value="0"> First</label>
  <label class="btn btn-default"><input type="radio" class="btn btn-default" value="1"> Second</label>
  <label class="btn btn-default"><input type="radio" class="btn btn-default" value="2"> Third</label>
  <!-- Children get compiled by `bs-radio-group` to :
  <label class="btn btn-default"><input type="radio" class="btn btn-default" value="left" ng-model="button.radio" bs-radio> Left</label>
  ...
  -->
</div>

Type support

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

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 plunker

$scope.selectedIcon = "";
$scope.selectedIcons = ["Globe","Heart"];
$scope.icons = [{"value":"Gear","label":"<i class=\"fa fa-gear\"></i> Gear"},{"value":"Globe","label":"<i class=\"fa fa-globe\"></i> Globe"},{"value":"Heart","label":"<i class=\"fa fa-heart\"></i> Heart"},{"value":"Camera","label":"<i class=\"fa fa-camera\"></i> Camera"}];

<label>Single select:&nbsp;</label>
<button type="button" class="btn btn-default" ng-model="selectedIcon" data-html="1" data-toggle="true" bs-options="icon.value as icon.label for icon in icons" bs-select>
  Action <span class="caret"></span>
</button>
<hr>
<label>Multiple select:&nbsp;</label>
<button type="button" class="btn btn-default" ng-model="selectedIcons" data-html="1" data-multiple="1" data-animation="am-flip-x" bs-options="icon.value as icon.label for icon in icons" bs-select>
  Action <span class="caret"></span>
</button>

Usage

Append a bs-selectattribute 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 $selectservice

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
  });
})

      

Examples

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

Live demo plunker

$scope.tabs = [
  {
    "title": "Home",
    "content": "Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica."
  },
  {
    "title": "Profile",
    "content": "Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee."
  },
  {
    "title": "About",
    "content": "Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade.",
    "disabled": true
  }
];
$scope.tabs.activeTab = "Home";
  
Enable third tab
Select "Profile" tab

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica.
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee.
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade.
<div class="btn btn-default" ng-click="toggleThirdTab()">
  {{ tabs[2].disabled ? 'Enable' : 'Disable' }} third tab
</div>
<div class="btn btn-default" ng-click="tabs.activeTab='Profile'">
  Select "Profile" tab
</div>
<hr>
<!-- bsActivePane is optional -->
<div bs-active-pane="tabs.activeTab" bs-tabs>
  <div ng-repeat="tab in tabs" data-title="{{ tab.title }}" name="{{ tab.title }}" disabled="{{ tab.disabled }}" ng-bind="tab.content" bs-pane>
  </div>
</div>
Add new tab
<!-- control a tab with bsActivePane binding -->
<div class="btn-group" ng-model="tabs.activeTab" bs-radio-group>
  <label class="btn btn-default" ng-repeat="tab in tabs">
    <input type="radio" class="btn btn-default" value="{{ $index }}">Tab n°{{ $index + 1 }}
  </label>
</div>
<div class="btn btn-default" ng-click="pushTab()">Add new tab</div>

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.

Examples

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

Live demo plunker

$scope.panels = [
  {
    "title": "Collapsible Group Item #1",
    "body": "Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch."
  },
  {
    "title": "Collapsible Group Item #2",
    "body": "Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee."
  },
  {
    "title": "Collapsible Group Item #3",
    "body": "Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade."
  }
];
$scope.panels.activePanel = 1;
  
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee.
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade.
<!-- ngModel is optional -->
<div class="panel-group" ng-model="panels.activePanel" role="tablist" aria-multiselectable="true" bs-collapse>
  <div class="panel panel-default" ng-repeat="panel in panels">
    <div class="panel-heading" role="tab">
      <h4 class="panel-title">
        <a bs-collapse-toggle>
          {{ panel.title }}
        </a>
      </h4>
    </div>
    <div class="panel-collapse" role="tabpanel" bs-collapse-target>
      <div class="panel-body">
        {{ panel.body }}
      </div>
    </div>
  </div>
</div>
Add new panel
<!-- control a collapse panel with ngModel -->
<div class="btn-group" ng-model="panels.activePanel" bs-radio-group>
  <label class="btn btn-default" ng-repeat="panel in panels">
    <input type="radio" class="btn btn-default" value="{{ $index }}">Panel n°{{ $index + 1 }}
  </label>
</div>
<div class="btn btn-default" ng-click="pushPanel()">Add new panel</div>

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 = [0,1];
  
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee.
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade.
<!-- ngModel is optional -->
<div class="panel-group" ng-model="multiplePanels.activePanels" data-allow-multiple="true" role="tablist" aria-multiselectable="true" bs-collapse>
  <div class="panel panel-default" ng-repeat="panel in panels">
    <div class="panel-heading" role="tab">
      <h4 class="panel-title">
        <a bs-collapse-toggle>
          {{ panel.title }}
        </a>
      </h4>
    </div>
    <div class="panel-collapse" role="tabpanel" bs-collapse-target>
      <div class="panel-body">
        {{ panel.body }}
      </div>
    </div>
  </div>
</div>

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'
  });
})

      

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 plunker

$scope.dropdown = [
  {
    "text": "<i class=\"fa fa-download\"></i>&nbsp;Another action",
    "href": "#anotherAction",
    "active": true
  },
  {
    "text": "<i class=\"fa fa-globe\"></i>&nbsp;Display an alert",
    "click": "$alert(\"Holy guacamole!\")"
  },
  {
    "text": "<i class=\"fa fa-external-link\"></i>&nbsp;External link",
    "href": "/auth/facebook",
    "target": "_self"
  },
  {
    "divider": true
  },
  {
    "text": "Separated link",
    "href": "#separatedLink"
  }
];
<!-- Button to trigger a default dropdown from an array ($scope.dropdown) [{text:'foo', href:'', click:''}, ...] -->
<button type="button" class="btn btn-lg btn-primary" data-animation="am-flip-x" bs-dropdown="dropdown" aria-haspopup="true" aria-expanded="false">Click to toggle dropdown
  <br>
  <small>(using an object)</small>
</button>

<!-- Inlined sibling dropdown -->
<button type="button" class="btn btn-lg btn-primary" data-animation="am-flip-x" bs-dropdown aria-haspopup="true" aria-expanded="false">Click to toggle dropdown
  <br>
  <small>(using inlined sibling template)</small>
</button>
<ul class="dropdown-menu" role="menu">
  <li><a href="#anotherAction"><i class="fa fa-download"></i>&nbsp;Some action</a></li>
  <li><a ng-click="$alert('Holy guacamole')"><i class="fa fa-globe"></i>&nbsp;Display an alert</a></li>
  <li ng-repeat="i in ['Foo', 'Bar', 'Baz']"><a ng-href="#action{{i}}"><i class="fa fa-chevron-right"></i>&nbsp;{{i}}</a></li>
</ul>

Append a bs-dropdownattribute to any element to enable the directive.

The module exposes a $dropdownservice

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 | contextmenu | 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 string ''

Provide an html template as a string (when templateUrl is falsy).

templateUrl path 'dropdown/dropdown.tpl.html'

If provided, overrides the default template, can be either a remote URL or a cached template id.

It should be a div.dropdown-menu element following Bootstrap styles conventions (like this).

onShow function

If provided, this function will be invoked after the dropdown is shown.

onBeforeShow function

If provided, this function will be invoked before the dropdown is shown.

onHide function

If provided, this function will be invoked after the dropdown is hidden.

onBeforeHide function

If provided, this function will be invoked before the dropdown is hidden.

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'
  });
})

      

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

Live demo plunker

$location.path() = "";
<nav class="navbar navbar-default" role="navigation" bs-navbar>
  <div class="navbar-header">
    <a class="navbar-brand" href="#">Brand</a>
  </div>
  <ul class="nav navbar-nav">
    <li data-match-route="/$"><a href="#/">Home</a></li>
    <li data-match-route="/page-one"><a href="#/page-one">Page One</a></li>
    <li data-match-route="/page-two.*"><a href="#/page-two/sub-a">Page Two</a></li>
  </ul>
</nav>

Append a bs-navbarattribute 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 hash symbol from the href.

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'
  });
})

      

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-scrollspyattribute to any element to enable the plugin.

The module also exposes an $scrollspyservice

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'
  });
})

      

Examples

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

Plugin dependency

Affix require the helpers.dimensions and helpers.debounce modules to be loaded.

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

    

Usage

Append a bs-affixattribute 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 $affixservice

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
  });
})