AngularStrap
AngularJS 1.2+ native directives for Bootstrap 3.
AngularJS 1.2+ native directives for Bootstrap 3.
mgcrea.ngStrap
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.
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.ngStrap
module into your application.
angular.module('myApp', ['mgcrea.ngStrap']);
AngularStrap provides two different files:
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.
AngularStrap provides independently built modules that can be loaded separately
angular.module('myApp', [ 'mgcrea.ngStrap.modal', 'mgcrea.ngStrap.aside', 'mgcrea.ngStrap.tooltip' ]);
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
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.
Theses docs rely on the
angular-motion.css
stylesheet from the AngularMotion project.
$ bower install angular-motion --save
mgcrea.ngStrap.modal
Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.
$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 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;
}
}
}
Append a bs-modal
attribute to any element to activate the directive.
$modal
serviceAvailable 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 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: |
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 |
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. |
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'
});
})
Methods available inside the directive scope to toggle visibility.
Reveals the modal.
Hides the modal.
Toggles the modal.
mgcrea.ngStrap.aside
Asides are custom panels, drawers that inherit the behavior of modals.
Asides require the modal plugin to be included.
$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>
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.
Append a bs-aside
attribute to any element to enable the plugin.
$aside
serviceAvailable 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 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:
|
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 |
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. |
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'
});
})
Methods available inside the directive scope to toggle visibility.
Reveals the aside.
Hides the aside.
Toggles the aside.
mgcrea.ngStrap.alert
Alerts are styled tiny dialogs that inherit the behavior of modals.
Alerts require the modal plugin to be included.
$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>
Append a bs-alert
attribute to any element to enable the plugin.
$alert
serviceAvailable 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 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: |
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 |
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. |
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'
});
})
Methods available inside the directive scope to toggle visibility.
Reveals the alert.
Hides the alert.
Toggles the alert.
mgcrea.ngStrap.tooltip
Add small overlays of content on hover, to any element for housing secondary information.
Tooltip require the helpers.dimensions module to be loaded.
$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>
Append a bs-tooltip
attribute to any element to enable the directive.
$tooltip
serviceAvailable for programmatic use (mainly in directives as it requires a DOM element).
var myTooltip = $tooltip(element, {title: 'My Title'});
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
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 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:
|
container | string | false | false |
Appends the tooltip to a specific element. Example:
|
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 |
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 } |
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 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. |
Methods available inside the directive scope to toggle visibility.
Reveals the tooltip.
Hides the tooltip.
Toggles the tooltip.
Enables or disables the tooltip.
mgcrea.ngStrap.popover
Add small overlays of content on tap, like those on the iPad, to any element for housing secondary information.
Popovers require the tooltip module to be loaded.
$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>
Append a bs-popover
attribute to any element to enable the directive.
$popover
serviceAvailable 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 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
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:
|
container | string | false | false |
Appends the popover to a specific element. Example:
|
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 |
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 } |
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'
});
})
Methods available inside the directive scope to toggle visibility.
Reveals the popover.
Hides the popover.
Toggles the popover.
mgcrea.ngStrap.typeahead
Add quick, dynamic typeahead functionality with any form text input.
Selects require the tooltip module and parseOptions helper module to be loaded.
$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>
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.
If you are using AngularStrap prior to version 2.2.0, please use ng-options
instead of bs-options
.
$typeahead
serviceAvailable for programmatic use (mainly in directives as it requires a DOM element).
var myTypeahead = $typeahead(element, {controller: someModelController});
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=""
.
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:
|
container | string | false | false |
Appends the typeahead to a specific element. Example:
|
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. |
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
});
})
mgcrea.ngStrap.datepicker
Add datepicker functionality with any form text input.
Datepickers require the tooltip module and dateParser helper module to be loaded.
These docs currently use bootstrap-additions for styling purposes.
This module leverages the $locale service. You just have to load the proper i18n file to seamlessly translate your datepickers.
$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>
Append a bs-datepicker
attribute to any element to enable the directive.
$datepicker
serviceAvailable for programmatic use (mainly in directives as it requires a DOM element).
var myDatepicker = $datepicker(element, ngModelController);
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=""
.
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:
|
container | string | false | false |
Appends the datepicker to a specific element. Example:
|
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 |
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 |
maxDate | date* | +Infinity |
Maximum allowed date for selection (* fed into the |
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: |
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
});
})
mgcrea.ngStrap.timepicker
Add quick, dynamic timepicker functionality with any form text input.
Timepickers require the tooltip module and dateParser helper module to be loaded.
Theses docs currently use bootstrap-additions for styling purposes.
This module leverages the $locale service. You just have to load the proper i18n file to seamlessly translate your timepickers.
$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>
Append a bs-timepicker
attribute to any element to enable the directive.
$timepicker
serviceAvailable for programmatic use (mainly in directives as it requires a DOM element).
var myTimepicker = $timepicker(element, ngModelController);
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=""
.
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:
|
container | string | false | false |
Appends the timepicker to a specific element. Example:
|
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. |
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
});
})
mgcrea.ngStrap.button
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.
Use bs-checkbox-group
and bs-radio-group
to easily setup the proper markup at compile time.
$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>
Theses directives can handle both strings
, numbers
and booleans
values.
mgcrea.ngStrap.select
Add quick, dynamic select functionality with any form text input.
Selects require the tooltip module and parseOptions helper module to be loaded.
$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: </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: </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>
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.
If you are using AngularStrap prior to version 2.2.0, please use ng-options
instead of bs-options
.
$select
serviceAvailable for programmatic use (mainly in directives as it requires a DOM element).
var mySelect = $select(element, controller);
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=""
.
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:
|
container | string | false | false |
Appends the select to a specific element. Example:
|
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. |
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
});
})
mgcrea.ngStrap.tab
Add quick, dynamic tab functionality to transition through panes of local content.
$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";
<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>
<!-- 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>
Append a bs-tabs
attribute to any element and several children bs-pane
attributes to children elements to enable the directive.
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.
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 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=""
.
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 |
activeClass | string | active |
Class to be applied to the animated element |
Name | type | default | description |
---|---|---|---|
disabled | string | false |
Disable pane |
name | string | '' |
Tab name. If provided, it will be used for `bsActivePane` instead of number |
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 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. |
mgcrea.ngStrap.collapse
Add quick, dynamic collapsable functionality to transition through panels of local content.
$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;
<!-- 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>
<!-- 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>
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];
<!-- 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>
Append a bs-collapse
attribute to any element and several bs-collapse-toggle
,bs-collapse-target
attributes to children elements to enable the directive.
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 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 |
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'
});
})
mgcrea.ngStrap.dropdown
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.
Dropdowns require the tooltip plugin to be included.
$scope.dropdown = [ { "text": "<i class=\"fa fa-download\"></i> Another action", "href": "#anotherAction", "active": true }, { "text": "<i class=\"fa fa-globe\"></i> Display an alert", "click": "$alert(\"Holy guacamole!\")" }, { "text": "<i class=\"fa fa-external-link\"></i> 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> Some action</a></li>
<li><a ng-click="$alert('Holy guacamole')"><i class="fa fa-globe"></i> 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> {{i}}</a></li>
</ul>
Append a bs-dropdown
attribute to any element to enable the directive.
$dropdown
serviceAvailable for programmatic use (mainly in directives as it requires a DOM element).
var myDropdown = $dropdown(element, {scope: {content: [{text:'foo', href:'', click:''}, ...]});
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
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:
|
container | string | false | false |
Appends the dropdown to a specific element. Example:
|
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 |
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. |
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'
});
})
mgcrea.ngStrap.navbar
Add quick, dynamic navbar functionality to transition through active/inactive states.
$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-navbar
attribute to any element to activate the directive.
Use data-match-route
attributes to any children navigation item that should be toggled active.
The directives also supports HTML5 mode
, you just have to drop the hash symbol
from the href.
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() |
You can override global defaults for the plugin with $navbarProvider.defaults
angular.module('myApp')
.config(function($navbarProvider) {
angular.extend($navbarProvider.defaults, {
activeClass: 'in'
});
})
mgcrea.ngStrap.scrollspy
The subnavigation on the left is a live demo of the scrollspy plugin.
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>
Append a bs-scrollspy
attribute to any element to enable the plugin.
$scrollspy
serviceAvailable for programmatic use (mainly inside a directive as it requires an element).
var scrollspy = $scrollspy(element, 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. |
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'
});
})
mgcrea.ngStrap.affix
The subnavigation on the left is a live demo of the affix plugin.
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>
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.
$affix
serviceAvailable for programmatic use (mainly inside a directive as it requires an element).
var affix = $affix(element, 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. |
You can override global defaults for the plugin with $affixProvider.defaults
angular.module('myApp')
.config(function($affixProvider) {
angular.extend($affixProvider.defaults, {
offsetTop: 100
});
})