This directive gives you a Bootstrap Dropdown with the power of AngularJS directives.
NOTE: I am currently working on a v2 of this directive with performance imporovments, removing the lodash dependency and add support for themes (bootstrap2, bootstrap3, angular-material). ETA is July 2015.
- Based on Bootstrap's dropdown.
- jQuery is not necessary.
- Separated your data and the selection data. no modification to the data made.
- Built-in search.
- Complete control on the selected items model to fit it to your requirements.
- Two view options: normal list and checkboxes.
- Pre-selected values.
- Limit selection count.
- Grouping items by property.
- Callback events.
- Translation texts.
- Scrollable list (useful for big lists)
http://dotansimha.github.io/angularjs-dropdown-multiselect/
-
required: AngularJS >= 1.2, Lodash >= 4, Bootstrap >= 3.0
-
Make sure to add the dependencies before the directive's js file.
-
Note: Bootstrap JS file is not needed for the directive, it just uses the CSS file.
-
Note: Make sure to add lodash.js to your project, and make sure you use the regulate version of Lodash (NOT lodash.underscore or lodash.compat
- Download the files
- Include lodash.js in your project.
<script type="text/javascript" src="lodash.js"></script>
.
- Include the file in your app
<script type="text/javascript" src="angularjs-dropdown-multiselect.js"></script>
.- You can also use the minified version (
angularjs-dropdown-multiselect.min.js
).
- Include the module in angular (i.e. in
app.js
) -angularjs-dropdown-multiselect
See the documentation and examples in the GitHub pages: http://dotansimha.github.io/angularjs-dropdown-multiselect/
- Feel free to send me more requests for features - open an issue with "feature request" tag - Thanks!
- Keyboard support.