How to Implement AngularJS Dropdown Multiselect
Posted By : Mayank Jain | 22-Nov-2018
Introduction
We can easily include multi-select dropdown in our angularJs project. It uses Bootstrap's Dropdown to show multi-select drop-down.
Features
- AngularJs compatible.
- It gives us complete control of the selected item according to our requirement.
- It supports pre-selected values and grouping of items in the drop-down.
- We can include a checkbox view for select and deselect the item.
- It also includes a built-in search which is useful for the big list.
- We can also translate the texts in the drop-down.
- JQuery is not required.
Prerequisites
Required: AngularJS >= 1.5, Bootstrap >= 3.0
Text Editor: (Visual Studio Code is used for the example)
Operating System: (Linux) with version information (Ubuntu 16.04)
Installation
1. We have to download the directive. We can download by using bower or npm.
- Using Bower - bower install angularjs-dropdown-multiselect
- Using Npm - npm install angularjs-dropdown-multiselect
2. We have to include the (.js) files in our project.
<script type="text/javascript" src="angularjs-dropdown-multiselect.js"></script>
3. We have to include the module in our main angular file (i.e. in app.js)
var app = angular.module('yourAppName',[ ... 'angularjs-dropdown-multiselect', ]);
Now, we are ready to use our multi-select drop-down in our project. Let's see a basic example of using this directive.
Example
- HTML
<div ng-dropdown-multiselect="" options="myDropdownOptions" selected-model=myDropdownModel" extra-settings="myDropdownSettings"></div>
options - used for adding the drop-down options.
selected-model - model used to access the drop-down and its options from the controller.
extra-settings - used for adding extra features this dropdown provide like ( styling options, changing the view etc. ).
- JavaScript
$scope.myDropdownOptions = [{ id: "S", label: "Standard" }, { id: "I", label: "Intermediate" }, { id: "B", label: "Best available" }]; $scope.myDropdownModel = [$scope.myDropdownOptions[0]]; $scope.myDropdownSettings = { styleActive: true, checkBoxes: true, smartButtonTextProvider(selectionArray) { if (selectionArray.length === 1) { return selectionArray[0].label; } else { return selectionArray.length + ' Selected'; } } };
Result
- Single and Multiple selection
Conclusion
You hope you have got some idea about Multi-select drop-down. If you'd like to learn more about it, please visit the following link:
- https://github.com/dotansimha/angularjs-dropdown-multiselect
References
- https://github.com/dotansimha/angularjs-dropdown-multiselect
- http://dotansimha.github.io/angularjs-dropdown-multiselect/docs/#/main
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Mayank Jain
Mayank is responsible for implementing visual elements that users see and interact with in a web application.His skillset includes JavaScript, HTML, CSS, AngularJS and Bootstrap.