Introduction
Multi Select Drop Down List Directive with latest versions of Bootstrap and AngularJS.
Using the Code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Creating Multi Select Drop Down List</title>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<script src="Scripts/angular.min.js"></script>
<script>
var varMyDirectivesApplication =
angular.module('myDirectivesApplication', []);
varMyDirectivesApplication.directive('dropdownMultiselect', function () {
return {
restrict: 'E',
scope: {
model: '=',
options: '=',
},
template:
"<div class='btn-group' data-ng-class='{open: open}'>" +
"<button class='btn btn-small'>Select...</button>" +
"<button class='btn btn-small dropdown-toggle'
data-ng-click='openDropdown()'>
<span class='caret'></span></button>" +
"<ul class='dropdown-menu' aria-labelledby='dropdownMenu'>" +
"<li><a data-ng-click='selectAll()'>
<span class='glyphicon glyphicon-ok green'
aria-hidden='true'></span> Check All</a></li>" +
"<li><a data-ng-click='deselectAll();'>
<span class='glyphicon glyphicon-remove red'
aria-hidden='true'></span> Uncheck All</a></li>" +
"<li class='divider'></li>" +
"<li data-ng-repeat='option in options'>
<a data-ng-click='toggleSelectItem(option)'>
<span data-ng-class='getClassName(option)'
aria-hidden='true'></span> {{option.name}}</a></li>" +
"</ul>" +
"</div>",
controller: function ($scope) {
$scope.openDropdown = function () {
$scope.open = !$scope.open;
};
$scope.selectAll = function () {
$scope.model = [];
angular.forEach($scope.options, function (item, index) {
$scope.model.push(item.id);
});
};
$scope.deselectAll = function () {
$scope.model = [];
};
$scope.toggleSelectItem = function (option) {
var intIndex = -1;
angular.forEach($scope.model, function (item, index) {
if (item == option.id) {
intIndex = index;
}
});
if (intIndex >= 0) {
$scope.model.splice(intIndex, 1);
}
else {
$scope.model.push(option.id);
}
};
$scope.getClassName = function (option) {
var varClassName = 'glyphicon glyphicon-remove red';
angular.forEach($scope.model, function (item, index) {
if (item == option.id) {
varClassName = 'glyphicon glyphicon-ok green';
}
});
return (varClassName);
};
}
}
});
var varMyApplication =
angular.module('myApplication', ['myDirectivesApplication']);
varMyApplication.controller('myController', function ($scope) {
$scope.users = [
{ "id": 1, "name": "Ali" },
{ "id": 2, "name": "Sara" },
{ "id": 3, "name": "Babak" },
{ "id": 4, "name": "Sanaz" },
{ "id": 5, "name": "Dariush" },
];
$scope.selectedUserIds = [3, 5];
});
</script>
<style>
ul.dropdown-menu li {
cursor: pointer;
}
ul.dropdown-menu li span.red {
color: red;
}
ul.dropdown-menu li span.green {
color: green;
}
</style>
</head>
<body>
<div class="container" ng-app="myApplication"
ng-controller="myController">
<br />
<br />
<div class="row">
<div class="col-xs-6">
<dropdown-multiselect model="selectedUserIds"
options="users"></dropdown-multiselect>
</div>
<div class="col-xs-6">
<ul>
<li data-ng-repeat="item in selectedUserIds">
{{ item }}
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
In this source code, we have 4 parts:
Part (1) "My AngularJS Directive(s) Application"
In this part, I created my AngularJS application that has just one Directive with the name of "dropdownMultiselect". I prefer you put this part to a JavaScript file (.js), instead of putting this source code directly to page!
Part (2) "Your AngularJS Application"
In this part, you write your own AngularJS application. If you want to use my AngularJS application that has "Multi Select Drop Down List" Directive, you should write:
var varMyApplication =
angular.module('myApplication', ['myDirectivesApplication']);
The above code means your AngularJS application should use another AngularJS application.
Part (3) "Styles"
I used just 3 simple styles for display items in beauty. ;-)
Part (4) "View"
In this part, you can write many "dropdown-multiselect" tags (elements) as you wish. Note that this Element Directive has two attributes:
options: With this attribute, you can bind your drop down list to some items.model: With this attribute, you can bind your drop down list to some selected Id(s).
Note: You can simply change this AngularJS Directive for creating your own simple (Single Select) drop down list.
Anyway, I think that this is a simple practical source code that teaches you how to write your own AngularJS Directives.
