My requirement is to create multiple select dropdown and ngmodel should result with comma seperated value. For that, i have created following directive
In module, we can include this directive and just we set in html as follows
app.directive('multiSelectDropDown', function () {
return {
restrict: 'E',
scope: {
model: '=',
options: '='
},
template: "<div class='btn-group dropdown' style='width:100%'>" +
"<input
type='text' ng-model='model' style='width:92%;height:36px;float:left;'
class='dropdown-toggle' data-toggle='dropdown' placeholder='Click to select' disabled>" +
"<button
class='btn btn-small dropdown-toggle' style='width:8%;height:36px;' 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='glyphicons ok'></i>
Select All</a></li>" +
"<li><a
data-ng-click='deselectAll();'><i class='glyphicons
remove'></i> Deselect
All</a></li>" +
"<li class='divider'></li>" +
"<li data-ng-repeat='option in options'>" +
"<a data-ng-click='setSelectedItem()'><span
data-ng-class='isChecked(option)'></span> {{option}}</a>" +
"</li>" +
"</ul>" +
"</div>",
controller: function ($scope) {
$scope.selectAll = function () {
$scope.model =
_.unique($scope.options).toString();
};
$scope.deselectAll = function () {
$scope.model = "";
};
$scope.setSelectedItem = function () {
var selected = this.option;
if ($scope.model != undefined
&& $scope.model != null && _.contains($scope.model.split(','), selected)) {
$scope.model =
_.without($scope.model.split(','), selected).toString();
} else {
var arrayModel = [];
if ($scope.model != undefined
&& $scope.model != null && $scope.model != "")
arrayModel =
$scope.model.split(',');
arrayModel.push(selected);
$scope.model =
arrayModel.toString();;
}
return false;
};
$scope.isChecked = function (selected) {
if ($scope.model != undefined
&& $scope.model != null && $scope.model != "") {
if (_.contains($scope.model.split(','), selected)) {
return 'glyphicons ok';
}
}
return false;
};
}
}
});
//ArrayList = [‘A1’,’A2’,’A3’]
//modelToBind = “A1,A2”
<multi-select-drop-down model="modelToBind" options="ArrayList"></multi-select-drop-down>
