Angular Bootstrap Plus
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
Controller's scope:
{{ browser }}
- Here
<bsp-select>
replaces the common HTML tag<select>
. - In a AngularJS controller, bind a model using
ng-model="browser"
to the local scope. - Options are added using the HTML tag
<bsp-option>
. - To pre-select an
<bsp-option>
element, add the attributeselected
to its HTML tag. - For a selected
<bsp-option>
, the value of attributevalue
is set to the scope's model (herebrowser
).
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
Controller's scope:
{{ browser }}
- With
empty-label="Select me"
, one can override the label, when no option has been selectd. - 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. - 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
- Here
<bsp-select>
is used without an AngularJS controller, instead its selection is available through a HTML<form>
element. - Submitting
<bsp-select>
via a<form>
element, requires to add the attributename
, otherwise the browser does not know how to encode the POST data. - 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
Controller's scope:
{{ browser }}
- By adding the attribute
multiple
to an<bsp-select>
element, a user can select more than one option. - 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. - In the select button, labels of selected options are separated using a comma:
,
. This can be overriden by using the attributeseparator
. Special charaters inside the separator attribute, such as spaces, must be URI encoded. In doubt, use the Javascript functionencodeURI()
.
HTML Code:
<bsp-select multiple ng-model="browser" empty-label="Select any" separator="%20%20%20">
...
Multiple deselectable options
Controller's scope:
{{ browser }}
- 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
Controller's scope:
{{ browser }}
- For better organization,
<bsp-option>
elements can be grouped together by putting them into a<bsp-optgroup>
element. - Grouped
<bsp-option>
elements do not change behaviour, except for optaining two additional features: - 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. - 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.
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
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
Other Features
- To disable an
<bsp-option>
element, add the attributedisabled
to its HTML tag. - 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>
...