In some cases, we need to create multi select dropdown. With AngularJS directive it is very easier to implement
Okay, let me first show basic multi select dropdown without any angularJS
Here we used simple Select element with multiple attribute. It allows you to select multiple items from dropdown. But drawback is, we should use Ctrl key to select multiple items and also style is not that much easier to customize.
To resolve these dependencies, we can choose AngularJS directive as solution.
app.directive('multiSelectDropDown', function () {
This directive you can include into your AngularJS application as directive
var app = angular.module('yourAppName');
In HTML, we can call this directive simply like below
This requires BootStrap css file, Glyphicons to make work.
Okay, let me first show basic multi select dropdown without any angularJS
<select data-ng-model="model"
data-ng-options="value
as name for item in itemlist" multiple>
<option value="" style="color:gray;">-Select Item-</option>
</select>Here we used simple Select element with multiple attribute. It allows you to select multiple items from dropdown. But drawback is, we should use Ctrl key to select multiple items and also style is not that much easier to customize.
To resolve these dependencies, we can choose AngularJS directive as solution.
app.directive('multiSelectDropDown', function () {
return {
restrict: 'AE',
scope: {
model: '=',
options: '=',
optionsName: '@',
optionsValue: '@',
},
template: "<div class='btn-group dropdown'
style='width:100%'>" +
"<input
type='text' value='{{model.toString()}}' data-toggle='dropdown'
class='dropdown-toggle' placeholder='Click to select' disabled>" +
"<button
class='btn btn-small dropdown-toggle' data-toggle='dropdown'><span
class='caret'></span></button>" +
"<ul class='dropdown-menu' style='width:100%' aria-labelledby='dropdownMenu'>" +
"<li><a data-ng-click='selectAll()'><i
class='glyphicon glyphicon-ok'></i>
Select All</a></li>" +
"<li><a
data-ng-click='deselectAll();'><i class='glyphicon glyphicon-remove'></i> Deselect All</a></li>" +
"<li class='divider'></li>" +
"<li data-ng-repeat='option in options'>" +
"<a data-ng-click='setSelectedItem()'><span
class=\"{{isChecked(option) ? 'glyphicon glyphicon-ok' :
''}}\"></span> {{option[''+optionsName+'']}} </a>" +
"</li>" +
"</ul>" +
"</div>",
controller: function ($scope) {
$scope.selectAll = function () {
$scope.model = [];
$scope.options.forEach(function (option, index) {
$scope.model.push(option[$scope.optionsValue]);
});
};
$scope.deselectAll = function () {
$scope.model = [];
};
$scope.setSelectedItem = function () {
var selected = this.option;
if ($scope.model == undefined
|| $scope.model == null)
model = [];
if (_.contains($scope.model,
selected[$scope.optionsValue])) {
$scope.model =
_.without($scope.model, selected[$scope.optionsValue]);
} else {
$scope.model.push(selected[$scope.optionsValue]);
}
return $scope.model;
};
$scope.isChecked = function (selected) {
if ($scope.model == undefined
|| $scope.model == null)
$scope.model = [];
if (_.contains($scope.model,
selected[$scope.optionsValue])) {
return true;
}
return false;
};
}
}
});
var app = angular.module('yourAppName');
In HTML, we can call this directive simply like below
<multi-select-drop-down model="model" options="itemlist" options-name="name" options-value="value
"></multi-select-drop-down>
