AngularStrap

Overview and examples

Fetches an external html partial (or an inline ng-template) and populates the modal with its content.

Use any button/link to trigger a modal by appending a bs-modal attribute.

Both $scope.show(), $scope.hide() & $scope.$modal() are available inside the modal to toggle its visibility.

$scope.modal: {{modal | json}}

<!-- Button to trigger modal -->
<button type="button" class="btn" bs-modal="'partials/modal.html'">...</button>

<!-- Modal (external ./partials/modal.html or inline ng-template) -->
<div class="modal-header">
  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
  <h3>Modal header</h3>
</div>
<div class="modal-body">
  <p>{{modal.content}}</p>
  <br />
  <pre>2 + 3 = {{ 2 + 3 }}</pre>
</div>
<div class="modal-footer">
  <button type="button" class="btn" ng-click="hide()">Close</button>
  <button class="btn btn-primary" ng-click="modal.saved=true;hide()">Save changes</button>
</div>

Heads up! You can use $modal functions (show, hide, $modal) out of its scope by passing them: ng-click="someScopeFunction($modal)".

$modal Service

AngularStrap ships with a $modal service that you can inject in your controllers to trigger modals.

var modal = $modal({template: '/js/app/views/elements/modal-welcome.html', show: true, backdrop: 'static'});

Overview and examples

Toggleable, contextual menu for displaying lists of links.

Use any element to trigger a dropdown menu by appending a bs-dropdown attribute.

Edit in plunker

$scope.dropdown: {{dropdown | json}}

<!-- Button to trigger dropdown -->
<button type="button" class="btn" bs-dropdown="dropdown">...</button>

<!-- Separated button -->
<div class="btn-group">
  <button type="button" class="btn btn-primary">...</button>
  <button type="button" class="btn btn-primary" bs-dropdown="dropdown">...</button>
    <span class="caret"></span>
  </button>
</div>

Overview and examples

Performs regular expression tests with the data-match-route attribute when $location.path() gets updated.

Toggles the active class for you. Trigger the behavior with a bs-navbar attribute.

Edit in plunker

$location.path(): {{$location.path()}}

<div class="navbar" bs-navbar>
  <div class="navbar-inner">
    <a class="brand" href="#">Title</a>
    <ul class="nav">
      <!-- You can use regular expressions -->
      <li data-match-route="/(:?navbar)"><a href="#/navbar">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>
  </div>
</div>

Heads up! The directives also supports HTML5 mode, you just have to drop the dashes.

Overview and examples

Create tabs interfaces by appending a bs-tabs attribute to a div container.

Edit in plunker

$scope.tabs: {{tabs | json}}

tabs.activeTab={{tabs.activeTab}}

<div data-fade="1" ngModel="activeTab" bs-tabs>
  <div ng-repeat="tab in tabs" data-title="{{tab.title}}"><p>{{tab.content}}</p></div>
</div>

Heads up! You can programmaticaly switch tab with an optional ngModel attribute.
You must use dot-notation (ie. myObj.myProp) to make the two-way databinding work.

Overview and examples

Parses the content passed to the directive & displays a tooltip with it.

Use any button/link to trigger a tooltip menu by appending a bs-tooltip attribute.

Both $scope.show() and $scope.hide() are available inside the tooltip to toggle its visibility.

Edit in plunker

tooltip: {{tooltip | json}}

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

<!-- Basic tooltip on hover -->
<a href="#" bs-tooltip="tooltip.title">...</a>
<!-- Button to trigger tooltip on click -->
<button type="submit" class="btn" data-trigger="click" bs-tooltip="tooltip.title">...</button>
<!-- Force close others with data-unique attribute -->
<input type="text" data-trigger="focus" data-unique="1" bs-tooltip="tooltip.title"/>
<!-- Two-way databinding -->
<input type="checkbox" ng-model="tooltip.checked" bs-tooltip="tooltip.title"/>

Heads up! To prevent databinding issues, "the rule of thumb is, if you use ng-model there has to be a dot somewhere." Miško Hevery

Overview and examples

Fetches an external html partial (or an inline ng-template) and populates the popover with its content.

Use any button/link to trigger a popover menu by appending a bs-popover attribute.

Both $scope.show() and $scope.hide() and $scope.$popover() are available inside the popover to toggle its visibility.

Edit in plunker

popover: {{popover | json}}

<!-- Button to trigger popover with an external partial -->
<button type="button" class="btn" bs-popover="'partials/popover.html'">...</button>

<!-- You can also use a simple object {title:'', content:'', etc.} instead of a partial/template -->
<button type="button" class="btn" bs-popover="popover">...</button>

<!-- Force close others with data-unique attribute -->
<button type="button" class="btn" data-unique="1" bs-popover="'partials/popover.html'">...</button>

<!-- Popover (external ./partials/popover.html or inline ng-template)  -->
<form name="popoverForm">
  <p ng-bind-html-unsafe="popover.content"></p>
  <br />
  <pre>2 + 3 = {{ 2 + 3 }}</pre>
  <div class="form-actions">
    <button type="button" class="btn" ng-click="submitForm($popover)">Close</button>
    <button class="btn btn-primary" ng-click="popover.saved=true;hide()">Save changes</button>
  </div>
</form>

Heads up! You can use ng-controller="MyPopoverCtrl" alongside bs-popover="..." to spawn a controller with a custom scope for your popover.

Overview and examples

Build a custom alert with the bs-alert attribute.

alerts: {{alerts | json}}

<!-- Basic static alert (default bootstrap behavior) -->
<div class="alert fade" bs-alert><strong>Hey!</strong> This is a static alert.</div>

<!-- Alert bound to an object (alert.closed is set to true on close) -->
<div class="alert fade" bs-alert="alert"></div>

<!-- Use an array stack (alert is removed from the stack on close) -->
<div class="alerts">
  <div class="alert fade" ng-repeat="alert in alerts" bs-alert="alert"></div>
</div>

Heads up! You can use a button with data-dismiss="alert" to dismiss your alerts.

Overview and examples

Enables databinding between a button and a scope object.

Use any button/link with ng-model and bs-button attributes.

button: {{button | json}}

<button type="button" class="btn" ng-model="button.active" bs-button>...</button>

Button Select

buttonSelect: {{buttonSelect | json}}

Product price:

<div class="input-append">
  <input type="text" ng-model="buttonSelect.price">
  <button type="button"class="btn" ng-model="buttonSelect.currency" bs-button-select="['$', '€', '¥']"></button>
</div>

Checkboxes

Add bs-buttons-checkbox for checkbox-style toggling on btn-group.

checkbox: {{checkbox | json}}

<div class="btn-group" bs-buttons-checkbox>
  <button type="button" class="btn" ng-model="checkbox.left">...</button>
  <button type="button" class="btn" ng-model="checkbox.middle">...</button>
  <button type="button" class="btn" ng-model="checkbox.right">...</button>
</div>

Radios

Add bs-buttons-radio for radio-style toggling on btn-group.

radio: {{radio | json}}

<div class="btn-group" bs-buttons-radio>
  <button type="button" class="btn" ng-model="radio.left">...</button>
  <button type="button" class="btn" ng-model="radio.middle">...</button>
  <button type="button" class="btn" ng-model="radio.right">...</button>
</div>

Radios with a single model

Add bs-buttons-radio with an ng-model attribute to bind your buttons to a single model.

radioValue: {{radioValue | json}}

<div class="btn-group" ng-model="radioValue" bs-buttons-radio>
  <button type="button" class="btn" value="left">...</button>
  <button type="button" class="btn" value="middle">...</button>
  <button type="button" class="btn" value="right">...</button>
</div>

Overview and examples

Use any input with typeahead functionality by appending a bs-typeahead attribute.

value: {{typeaheadValue}}

typeahead: {{typeahead}}

<input type="text" ng-model="typeaheadValue" bs-typeahead="typeahead">

<!-- You can also use a function -->
<input type="text" ng-model="typeaheadValue" bs-typeahead="typeaheadFn">

<!-- Function defined in your controller -->
$scope.typeaheadFn = function(query) {
  return $.map($scope.typeahead, function(country) {
    return country + '_1';
  });
}

<!-- Async function defined in your controller  -->
$scope.typeaheadFn = function(query, callback) {
  $http.get('/stations/autocomplete?term='+query).success(function(stations) {
    callback(stations); // This will automatically open the popup with retrieved results
  });
}

Heads up! You can use a the data-min-length attribute to either show the popup right away (minLength=0) or only after a specific number of chars have been typed in.

Overview and examples

Directive for bootstrap-select (made by Silvio Moreto).

Append a bs-select attribute to enable bootstrap-select on a regular Angular select.

Requires bootstrap-select.js & bootstrap-select.css.

Simple selects

Edit in plunker

$scope.selects: {{selects | json}}

$scope.selectedItem: {{selectedItem | json}}

<select class="span2" ng-model="selectedItem" ng-options="value.id as value.name for (key, value) in selects" data-style="btn-primary" bs-select></select>

Multiple selects

Edit in plunker

$scope.selects: {{selects | json}}

$scope.selectedItems: {{selectedItems | json}}

<select class="span4" ng-model="selectedItem" multiple title="Choose one of the following..." ng-options="value.id as value.name for (key, value) in selects" data-style="btn-primary" bs-select></select>

Overview and examples

Directive for bootstrap-datepicker (made by Stefan Petre).

Requires bootstrap-datepicker.js & bootstrap-datepicker.css.

Add a datepicker to an input by appending a bs-datepicker attribute.

Supports AngularJS validation out of the box.

Edit in plunker

datepicker: {{datepicker | json}}

<div class="control-group input-append">
  <input type="text" ng-model="datepicker.date" data-date-format="dd/mm/yyyy" bs-datepicker>
  <button type="button" class="btn" data-toggle="datepicker"><i class="icon-calendar"></i></button>
</div>

<!-- You can use the global $strapConfig to set defaults -->
app.value('$strapConfig', {
  datepicker: {
    language: 'fr',
    format: 'M d, yyyy'
  }
});

Heads up! You can use a custom button or add-on as a toggle with data-toggle="datepicker" on a sibling element.

Overview and examples

Directive for bootstrap-timepicker (made by jdewit).

Requires bootstrap-timepicker.js & bootstrap-timepicker.css.

Add a timepicker to an input by appending a bs-timepicker attribute.

Supports AngularJS validation out of the box.

timepicker: {{timepicker | json}}

<div class="control-group input-append">
  <input type="text" ng-model="timepicker.time" bs-timepicker>
  <button type="button" class="btn" data-toggle="timepicker"><i class="icon-time"></i></buttoni>
</div>

Heads up! You can use a custom button or add-on as a toggle with data-toggle="timepicker" on a sibling element.

Navbar directives/navbar.js

Overview and examples

Tab directives/tab.js

Overview and examples

Tooltip directives/tooltip.js

Overview and examples

Popover directives/popover.js

Overview and examples

Alert directives/alert.js

Overview and examples

Button directives/button.js

Overview and examples

Button Select

Checkboxes

Radios

Radios with a single model

Typeahead directives/typeahead.js

Overview and examples

Select directives/select.js

Overview and examples

Simple selects

Multiple selects

Datepicker directives/datepicker.js

Overview and examples

Timepicker directives/timepicker.js

Overview and examples

Modal directives/modal.js

Overview and examples

$modal Service

Dropdown directives/dropdown.js

Overview and examples

Navbar directives/navbar.js

Overview and examples

Tab directives/tab.js

Overview and examples

Tooltip directives/tooltip.js

Overview and examples

Popover directives/popover.js

Overview and examples

Alert directives/alert.js

Overview and examples

Button directives/button.js

Overview and examples

Button Select

Checkboxes

Radios

Radios with a single model

Typeahead directives/typeahead.js

Overview and examples

Select directives/select.js

Overview and examples

Simple selects

Multiple selects

Datepicker directives/datepicker.js

Overview and examples

Timepicker directives/timepicker.js

Overview and examples