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

Result

 

 

 

 

 

 

 

 

 

 

 

 

Result

 

 

 

 

 

 

 

 

 

 

 

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

 

About Author

Author Image
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.

Request for Proposal

Name is required

Comment is required

Sending message..