Angular Bootstrap Multiselect

Basic

Provide a list of possible options, and the model value will reflect the subset of selected options. The list can contain strings or objects (see below).

options = {{options | prettyprint}}

Model: {{selection1 | prettyprint}}

Search box

Make the list searchable by setting showSearch to true.

options = {{options | prettyprint}}

Model: {{selection2 | prettyprint}}

Select/Unselect all

Extra buttons will appear by setting the showSelectAll and showUnselectAll properties

options = {{options | prettyprint}}

Model: {{selection3 | prettyprint}}

Selection Limit

Specify the 'selectionLimit' parameter to put an upper limit on the number of elements that can be selected. If the limit is reached, the rest of the options will be disabled.

options = {{options | prettyprint}}

Model: {{selection4 | prettyprint}}

Limited search results

Specify the 'searchLimit' parameter to put an upper limit on the number of search results that will be displayed.

options = {{options2 | prettyprint}}

Model: {{selection5 | prettyprint}}

Objects as model

When using an object list instead of string list as the model value, following parameters are mandatory:

• displayProp: the propery on the object to be used for displaying in the search list
• idProp: the propery on the object to be used to determine if two objects are equal. Can be the same as displayProp

options = {{options2 | prettyprint}}

Model: {{selection6 | prettyprint}}

Large Datasets

Some optimizations allow larger datasets than usually possible using angular bindings

options = List of 100 000 objects

Model: {{selection7 | prettyprint}}

Asynchronous Datasource

• Provide a function instead of a list as 'options'
• Access the contents of the search field using 'searchFilter'

options = 
function() {
  return $q(function (resolve, reject) {
    $timeout(function () {
      resolve([ 
	      $scope.searchFilter + '1',
	      $scope.searchFilter + '2'
		])
    }, 1000);
  });
}
							

Model: {{selection7 | prettyprint}}

Custom CSS classes

Provide a list of CSS classes that should be applied to the button element (default: btn-default btn-block)

options = {{options | prettyprint}}

Model: {{selection8 | prettyprint}}

Custom Placeholder

Provide a custom label to be displayed as placeholder. If you want to replace more strings, check Custom Labels

options = {{options | prettyprint}}

Model: {{selection9 | prettyprint}}

Tooltip

Show tooltips in the option list. Useful in case of long values.

options = {{options | prettyprint}}

Model: {{selection9 | prettyprint}}

Custom Labels

Provide custom labels for all strings in the widget

options = {{options | prettyprint}}

labels = {{labels | prettyprint}}

Model: {{selection10 | prettyprint}}