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.
{{ browser }}
<bsp-select>
replaces the common HTML tag <select>
.ng-model="browser"
to the local scope.<bsp-option>
.<bsp-option>
element, add the attribute selected
to its HTML tag.<bsp-option>
, the value of attribute value
is set to the scope's model (here browser
).
<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>
{{ browser }}
empty-label="Select me"
, one can override the label, when no option has been selectd.required
is missing, this empty label is added as extra option named “Select me”, which can be used to deselect all options.filter="Filter ..."
to the <bsp-select>
element, a user can search for options containing that string.
This is useful for long lists of options.
<bsp-select ng-model="browser" empty-label="Select me" filter="Filter ...">
...
<bsp-select>
is used without an AngularJS controller, instead its selection is available through a HTML <form>
element.<bsp-select>
via a <form>
element, requires to add the attribute name
, otherwise the browser does not know how to encode the POST data.
<form name="my_form" action="..." method="post">
<bsp-select empty-label="Select Browser" name="select_browser">
...
</bsp-select>
</form>
{{ browser }}
multiple
to an <bsp-select>
element, a user can select more than one option.<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.,
. 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()
.
<bsp-select multiple ng-model="browser" empty-label="Select any" separator="%20%20%20">
...
{{ browser }}
deselectable
to an <bsp-select>
element, selected options can be deselected right out of the drop-down button.
<bsp-select multiple ng-model="browser" empty-label="Select any" separator="%20%20%20" deselectable>
...
{{ browser }}
<bsp-option>
elements can be grouped together by putting them into a <bsp-optgroup>
element.<bsp-option>
elements do not change behaviour, except for optaining two additional features:selectable
to an <bsp-optgroup>
element, a user can turn on and off all options of that group, by clicking on the groups title.single
to an <bsp-optgroup>
element, allows to select only one option of that group.
<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>
Add a callback function to the parent controller with ng-change="browserChanged()"
. This will be fired
whenever the select box changes its value.
<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.
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.
<bsp-option>
element, add the attribute disabled
to its HTML tag.<hr>
element separates Webkit based browsers from the rest of the world.
<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
.
<bsp-select ng-model="browser" empty-label="Select me" disabled>
...