Thursday, September 10, 2015

AngularJS - Multiple Select Dropdown with Comma Seperated ngModel

My requirement is to create multiple select dropdown and ngmodel should result with comma seperated value. For that, i have created following directive

      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>&nbsp;{{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;
                };
            }
        }
    });


In module, we can include this directive and just we set in html as follows

//ArrayList = [‘A1’,’A2’,’A3’]
//modelToBind = “A1,A2”


<multi-select-drop-down model="modelToBind" options="ArrayList"></multi-select-drop-down>