#oi.multiselect — AngularJS directive of select element
Features
- API compatible with Angular select
- Angular 1.2+ without jQuery and other dependencies
- search options by substring (including the search query to the server)
- use Bootstrap styles (but you can use own styles)
- 17 KB minified
Demo
Do you want to see module in action? Visit http://tamtakoe.github.io/oi.multiselect/!
Installation
You can download files through Bower:
npm install -g bower
bower install oi.multiselect
or make build:
npm install
npm install -g grunt-cli
grunt build
Then you need to include into index.html:
multiselect.min.css
multiselect.min.js or multiselect-tpls.min.js
When you are done downloading all the dependencies and project files the only remaining part is to add dependencies on the oi.multiselect
AngularJS module:
angular.module('myModule', ['oi.multiselect']);
Use oi-multiselect
directive:
<oi-multiselect
ng-options="item.name for item in shopArr track by item.id"
ng-model="bundle"
multiple
placeholder="Select"
></oi-multiselect>
Attributes
ng-options
— see: ngOptionsng-options="item for item in shopArrShort | limitTo: 3"
— filter input listng-options="item for item in shopArrFn($query, $querySelectAs)"
— generate input list (expects array/object or promise)
ng-model
— chosen item/itemsng-disabled
— specifies that a drop-down list should be disabledmultiple
— specifies that multiple options can be selected at oncemultiple-limit
— maximum number of options that can be selected at oncereadonly
— specifies that an input field is read-onlynotempty
— specifies that an input field can't be emptyautofocus
— specifies that an input field should automatically get focus when the page loadsoi-multiselect-options
— object with options. You can override them inoiMultiselectProvider.options
debounce
— timeout of debounced input field (default: 500). Set only ifvalue
is function which return promisesearchFilter
— filter name for items in search fielddropdownFilter
— filter name for items in dropdownlistFilter
— filter name for items order in dropdownsaveLastQuery
— function which getlastQuery
andremovedValue
and return string for input after element was removed (default: '')saveTrigger
— Trigger on which element is stored in the model. May beenter
,backslash
,blur
(default:enter
,backslash
)newItem
— Mode of adding new items from query (default: false). May beautocomplete
(priority save matches),prompt
(priority save new item)newItemModel
— New items model (default: model = query).$query
value from model will be changed to query string.newItemFn
— function which get query and return new item object or promise