Multi select Drop down list using AngularJS and Bootstrap
Code
Html
<div ng-controller="multiselectddlController">
<div style="font-weight: bold;">Get Selected Country</div>
<div data-ng-repeat="country in SelectedCountries">
<ul>
<li>{{country.name}}</li>
</ul>
</div>
<multiselect-dropdown model=" SelectedCountries " options="MasterCountries "></multiselect-dropdown>
</div>
<div style="font-weight: bold;">Get Selected Country</div>
<div data-ng-repeat="country in SelectedCountries">
<ul>
<li>{{country.name}}</li>
</ul>
</div>
<multiselect-dropdown model=" SelectedCountries " options="MasterCountries "></multiselect-dropdown>
</div>
Module
var multiddl = angular.module('multiddl', []);
Directive
multiddl.directive('multiselectDropdown', function () {
return {
restrict: 'E',
scope: {
model: '=',
options: '=',
},
template:
"<div class='btn-group' data-ng-class='{open: open}' style='width: 200px;'>" +
"<button class='btn btn-small' style='width: 160px;'>---Select---</button>" +
"<button class='btn btn-small dropdown-toggle' data-ng-click='openDropdown()' style='width: 40px;' ><span class='caret'></span></button>" +
"<ul class='dropdown-menu' aria-labelledby='dropdownMenu' style='position: relative;'>" +
"<li style='cursor:pointer;' 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);
});
};
$scope.deselectAll = function () {
$scope.model = [];
};
$scope.toggleSelectItem = function (option) {
var intIndex = -1;
angular.forEach($scope.model, function (item, index) {
if (item.id == option.id) {
intIndex = index;
}
});
if (intIndex >= 0) {
$scope.model.splice(intIndex, 1);
} else {
$scope.model.push(option);
}
};
$scope.getClassName = function (option) {
var varClassName = 'glyphicon glyphicon-remove-circle';
angular.forEach($scope.model, function (item, index) {
if (item.id == option.id) {
varClassName = 'glyphicon glyphicon-ok-circle';
}
});
return (varClassName);
};
}
}
});
Controller:
multiddl.controller("multiselectddlController", function ($scope) {
$scope.SelectedCountries = [{
"id": 1,
"name": "India"
}, {
"id": 3,
"name": "Japan"
}, {
"id": 5,
"name": "Germany"
}];
$scope.MasterCountries = [{
"id": 1,
"name": "India"
}, {
"id": 2,
"name": "America"
}, {
"id": 3,
"name": "Japan"
}, {
"id": 4,
"name": "China"
}, {
"id": 5,
"name": "Germany"
}]
});
Explanation
- In this example I am using angular js directive to achieve the functionality of multi select drop down list. Here I am using the directive as an element. This you can achieve by using "restrict: 'E'". If you use "A" the directive will act as an attribute.
- You can get the multi select drop down by passing $scope to model and option in the directive
- Pass selected $scope to model and pass master $scope to option
- The model and option $scope structure should be as: {"id":1,"name":'example'}
- Here bootstrap is used to get the style and glyphicons
