#oi.select — AngularJS directive of select element
- multiselect
- 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
Do you want to see module in action? Visit tamtakoe.github.io/oi.select or try playground
You can download files through Bower:
npm install -g bower
bower install oi.select
or use npm:
npm install --save oi.select
or use local:
npm install
npm install -g bower
npm install -g gulp
bower install
run local:
gulp
open "http://localhost:3000"
make build and run tests:
gulp build
gulp test
Then you need to include into index.html:
select.min.css
select.min.js or select-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.select AngularJS module:
angular.module('myModule', ['oi.select']);Use oi-select directive:
<oi-select
oi-options="item.name for item in shopArr track by item.id"
ng-model="bundle"
multiple
placeholder="Select"
></oi-select>oi-options— see: ngOptionsoi-options="item for item in shopArrShort | limitTo: 3"— filter input listoi-options="item for item in shopArrFn($query, $selectedAs)"— 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 onceplaceholder— native placeholdermultiple-placeholder— placeholder which is shown in multiple mode near chosen optionslist-placeholder— placeholder which is shown in list if no elements foundreadonly— specifies that an input field is read-onlyautofocus— specifies that an input field should automatically get focus when the page loadsoi-select-options— object with options. You can override them inoiSelectProvider.optionsdebounce— timeout of debounced input field (default: 500). Set only ifvalueis function which return promisesearchFilter— filter name for items in search fielddropdownFilter— filter name for items in dropdowngroupFilter— filter name for group headerlistFilter— filter name for items order in dropdown. Usenoneto disable filtering. You can set special options (see Filtered example)editItem— function which getlastQuery,removedItemandgetLabel(item)and return string for input after element was removed (default: '').editItem = trueallows you to edit a deleted item.editItem = 'correct'same astruebut does not edit the first timesaveTrigger— Trigger on which element is stored in the model. May beenter,blur,space,taband any characters devided by spaces (default:enter tab blur)cleanModel— Clean model on click for single select.closeList— close dropdown list by default after choosing or removing item (default: true)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).$queryvalue from model will be changed to query string.newItemFn— function which get query and return new item object or promise. F.e.'addItem($query)'removeItemFn— function which get removed item model and return any value or promise. If promise was rejected, item wouldn't removed. F.e.'removeItem($item)'maxlength— maximum number of characters allowed in the inputminlength— minimum number of characters for searching
options— default options which we can override inoiSelectProvider.optionsversion— current version
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
