angular-bootstrap-plus

Getting Started

Download Angular-Bootstrap-Plus.

In your web page:

<link href="angular-bootstrap-plus/dist/bootstrap-plus.min.css" rel="stylesheet" />

<script src="angular.js" type="text/javascript"></script>
<script src="angular-sanizize.js" type="text/javascript"></script>
<script src="angular-bootstrap-plus/dist/bootstrap-plus.min.js" type="text/javascript"></script>

What is Angular Bootstrap Plus?

This is a collection of Angular directives for Bootstrap, which neither made it into Angular Strap, nor into UI Bootstrap.

Currently there is only one directive <bsp-select>...</bsp-select>, but a compatible slider plugin has already been prepared.

The alert reader might note, that a similar directive exists in Angular Strap, but here one must pass a list of configuration options to this directive. Since I had the need to style the internals of the drop down menu using pure HTML, this directive didn't fit.

In UI Bootstrap no such directive exists and after proposing this module to the maintainers, it wasn't accepted. Apparently the UI Bootstrap team wants to follow the same path as the Angular Strap team. My intention however is to use as much declarative HTML instead of configuration objects.



Process Bar


Alternative Select Box

The main reason for rewriting was, that after having searched for a while, for an alternative to the standard HTML <select> element, I came across this project: AngularJS MultiSelect. While being purely based on AngularJS, it unfortunately isn't written in a way directives should be. Moreover the code base is quite large (with more than 800 lines of code), which makes it hard to add new features. What I specially disliked, was the need to inject the select options via a wrapping controller. This certainly was not the intention of the AngularJS's authors!
Therefore I decided to write my own version of it.

Single option without default

Opera Internet Explorer Firefox Safari Chrome
Controller's scope:
{{ browser }}
  1. Here <bsp-select> replaces the common HTML tag <select>.
  2. In a AngularJS controller, bind a model using ng-model="browser" to the local scope.
  3. Options are added using the HTML tag <bsp-option>.
  4. To pre-select an <bsp-option> element, add the attribute selected to its HTML tag.
  5. For a selected <bsp-option>, the value of attribute value is set to the scope's model (here browser).

HTML Code:

<bsp-select ng-model="browser" required>
  <bsp-option value="opera"><img src="opera.png">Opera</bsp-option>
  <bsp-option value="ie" selected><img src="internet_explorer.png">Internet Explorer</bsp-option>
  <bsp-option value="firefox"><img src="firefox-icon.png">Firefox</bsp-option>
  <bsp-option value="safari"><img src="safari_browser.png">Safari</bsp-option>
  <bsp-option value="chrome"><img src="chrome.png">Chrome</bsp-option>
</bsp-select>

Single option with default value and search field

Opera Internet Explorer Firefox Safari Chrome
Controller's scope:
{{ browser }}
  1. With empty-label="Select me", one can override the label, when no option has been selectd.
  2. Since the attribute required is missing, this empty label is added as extra option named “Select me”, which can be used to deselect all options.
  3. By adding the attribute filter="Filter ..." to the <bsp-select> element, a user can search for options containing that string. This is useful for long lists of options.

HTML Code:

<bsp-select ng-model="browser" empty-label="Select me" filter="Filter ...">
  ...

Using in HTML forms

Opera Internet Explorer Firefox Safari Chrome
  1. Here <bsp-select> is used without an AngularJS controller, instead its selection is available through a HTML <form> element.
  2. Submitting <bsp-select> via a <form> element, requires to add the attribute name, otherwise the browser does not know how to encode the POST data.
  3. Try to submit the form and check the x-www-form-urlencoded data received by another server. The received POST data is shown in a new window.

HTML Code:

<form name="my_form" action="..." method="post">
  <bsp-select empty-label="Select Browser" name="select_browser">
  ...
  </bsp-select>
</form>

Multiple options

OpOpera IEInternet Explorer FFFirefox SaSafari ChChrome
Controller's scope:
{{ browser }}
  1. By adding the attribute multiple to an <bsp-select> element, a user can select more than one option.
  2. The content of each selected option is displayed inside the pulldown buttom. Since this might consume too much of the button's area, the labels inside the <bsp-option> element's can be abbrevated: Then only the content of a <acronym> element is shown inside the button. Optionally one may use the <abbr> element to show an abbrevated version of the options label. This content then is shown in the select button, but not in the <bsp-option> element.
  3. In the select button, labels of selected options are separated using a comma: , . This can be overriden by using the attribute separator. Special charaters inside the separator attribute, such as spaces, must be URI encoded. In doubt, use the Javascript function encodeURI().

HTML Code:

<bsp-select multiple ng-model="browser" empty-label="Select any" separator="%20%20%20">
  ...

Multiple deselectable options

Opera Internet Explorer Firefox Safari Chrome
Controller's scope:
{{ browser }}
  1. By adding the attribute deselectable to an <bsp-select> element, selected options can be deselected right out of the drop-down button.

HTML Code:

<bsp-select multiple ng-model="browser" empty-label="Select any" separator="%20%20%20" deselectable>
  ...

Multiple options using option groups

All Web Browsers Modern Web Browsers OpOpera IEInternet Explorer FFFirefox SaSafari ChChrome Classic Web Browsers NSNetscape Navigator MMosaic Browser AyAmaya
Controller's scope:
{{ browser }}
  1. For better organization, <bsp-option> elements can be grouped together by putting them into a <bsp-optgroup> element.
  2. Grouped <bsp-option> elements do not change behaviour, except for optaining two additional features:
  3. By adding the attribute selectable to an <bsp-optgroup> element, a user can turn on and off all options of that group, by clicking on the groups title.
  4. Adding the attribute single to an <bsp-optgroup> element, allows to select only one option of that group.

HTML Code:

<bsp-select multiple ng-model="browser" empty-label="Select any" separator="%20%20%20" filter="Filter ...">
  <bsp-optgroup>All Web Browsers
    <bsp-optgroup selectable>Modern Web Browsers
      <bsp-option value="opera"><acronym><img src="opera.png"><abbr>Op</abbr></acronym>Opera</bsp-option>
      <bsp-option value="ie"><acronym><img src="internet_explorer.png"><abbr>IE</abbr></acronym>Internet Explorer</bsp-option>
      <bsp-option value="firefox"><acronym><img src="firefox-icon.png"><abbr>FF</abbr></acronym>Firefox</bsp-option>
      <bsp-option value="safari" selected><acronym><img src="safari_browser.png"><abbr>Sa</abbr></acronym>Safari</bsp-option>
      <bsp-option value="chrome" selected><acronym><img src="chrome.png"><abbr>Ch</abbr></acronym>Chrome</bsp-option>
    </bsp-optgroup>
    <bsp-optgroup single>Classic Web Browsers
      <bsp-option value="netscape"><acronym><img src="netscape_icon.jpg"><abbr>NS</abbr></acronym>Netscape Navigator</bsp-option>
      <bsp-option value="mosaic"><acronym><img src="th-winspin.gif"><abbr>M</abbr></acronym>Mosaic Browser</bsp-option>
      <bsp-option value="amaya"><acronym><img src="Amaya_logo_65x50.png/48px-Amaya_logo_65x50.png"><abbr>Ay</abbr></acronym>Amaya</bsp-option>
    </bsp-optgroup>
  </bsp-optgroup>
</bsp-select>

Interaction with a parent controller

Add a callback function to the parent controller with ng-change="browserChanged()". This will be fired whenever the select box changes its value.

Opera Internet Explorer Firefox Safari Chrome

HTML Code:

<bsp-select ng-model="browser" empty-label="Select me" required ng-change="browserChanged()">
  ...

Changing the model value in the parent controller, changes the state of the select box.
Click onto one of the list items below.

  • Set Opera
  • Set Internet Explorer
  • Set Firefox
  • Set Safari
  • Set Chrome
Opera Internet Explorer Firefox Safari Chrome

Changing the model array in the parent's controller for a <bsp-select multiple> element, also changes the state of the select box.
Click onto some of the list items below.

  • Toggle Opera
  • Toggle Internet Explorer
  • Toggle Firefox
  • Toggle Safari
  • Toggle Chrome
Opera Internet Explorer Firefox Safari Chrome

Other Features

Opera Internet Explorer Firefox
Safari Chrome
  1. To disable an <bsp-option> element, add the attribute disabled to its HTML tag.
  2. Add any extra HTML elements to the list of options. Here a <hr> element separates Webkit based browsers from the rest of the world.

HTML Code:

<bsp-select ng-model="browser" empty-label="Select me" required>
  <bsp-option value="opera"><img src="opera.png">Opera</bsp-option>
  <bsp-option value="ie" disabled><img src="internet_explorer.png">Internet Explorer</bsp-option>
  ...

Of course, also the whole <bsp-select> element can be disabled by adding the attribute disabled.

HTML Code:

<bsp-select ng-model="browser" empty-label="Select me" disabled>
  ...