This code snippet provides an easy-to-understand and beginner-friendly approach to creating a custom multi-select dropdown in AngularJS. Designed with web developers in mind, this code enables you to toggle the display of the dropdown and select multiple options effortlessly. With just a few lines of code, you’ll have a fully functional multi-select dropdown ready to integrate into your AngularJS project.
How to Create Custom Multi-Select Dropdown in AngularJS
First of all, load the Font Awesome CSS by adding the following CDN link into the head tag of your HTML document.
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
Create the HTML structure for the custom select dropdown as follows:
<body ng-app="app">
<div class="multiple-select-wrapper" ng-controller="MultiSelectController as ctrl">
<button class="multiple-select-input" ng-click="ctrl.toggleMultiSelect()" ng-class="{opened: ctrl.showMultiSelect}">Select columns to show</button>
<div class="multiple-select-options" ng-show="ctrl.showMultiSelect">
<div class="multiple-select-option" ng-repeat="column in ctrl.columns">
<input class="option-input" type="checkbox" ng-model="column.selected"/><span class="option-label">{{ column.name }}</span><i class="fa fa-check-square option-selected"></i>
</div>
</div>
</div>
</body>
Style the dropdown using the following CSS styles. You can fully customize the dropdown with additional CSS according to your needs.
@charset "UTF-8";
* {
box-sizing: border-box;
outline: none;
}
.multiple-select-wrapper {
position: relative;
display: inline-block;
}
.multiple-select-input {
border: 1px solid #CCC;
background: #FFF;
padding: 10px 40px;
border-radius: 2px;
}
.multiple-select-input:hover, .multiple-select-input.opened {
background: #FAFAFA;
border-color: #A475E4;
}
.multiple-select-input::after {
content: "";
font-family: "FontAwesome";
position: absolute;
right: 10px;
}
.multiple-select-options {
position: absolute;
top: calc(100% + 2px);
background: #FFF;
width: 100%;
border-radius: 2px;
border: 1px solid #CCC;
overflow: hidden;
}
.multiple-select-option {
padding: 8px 20px;
position: relative;
}
.multiple-select-option:not(:last-child) {
border-bottom: 1px solid #CCC;
}
.multiple-select-option:hover {
color: #A475E4;
background: rgba(164, 117, 228, 0.1);
}
.multiple-select-option:hover::before {
content: "";
width: 2px;
background: #A475E4;
height: 100%;
left: 0;
top: 0;
position: absolute;
}
.option-input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
}
.option-selected {
position: absolute;
right: 10px;
color: #A475E4;
opacity: 0;
transition: 0.5s ease;
}
.option-input:checked ~ .option-label {
color: #A475E4;
}
.option-input:checked ~ .option-selected {
opacity: 1;
}
Now, load the AngularJS by adding the following CDN link before closing the body tag:
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js'></script>
Finally, add the following JavaScript function to your Angular project. In the this.columns array, you can add your own options by following the same structure with the desired names for your options. Feel free to add as many options as needed by including additional objects within the this.columns array.
var app = angular.module('app', []).controller('MultiSelectController', [
function () {
this.showMultiSelect = false;
this.toggleMultiSelect = () => {
this.showMultiSelect = !this.showMultiSelect;
};
this.columns = [{
name: 'name'
}, {
name: 'email'
}, {
name: 'phone'
}, {
name: 'address'
}];
}
]);
That’s all! hopefully, you have successfully integrated this simple custom multi-select dropdown. If you have any questions or suggestions, feel free to comment below.
