Multiselect DropDownList in AngularJS

Last Reply 6 months ago By dharmendr

Posted 6 months ago

How to use multiselect dropdownlist with checkbox in angularjs

And how to get the selected text and value.

 


Posted 6 months ago

Hirani,

Check this example. Now please take its reference and correct your code.

HTML

<html>
<head>
    <title></title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" />
    <script type="text/javascript">
        var app = angular.module('MyApp', []);
        app.directive('multiselectDropdown', function () {
            return {
                restrict: 'E',
                scope: {
                    model: '=',
                    options: '='
                },
                template:
            "<div class='btn-group' data-ng-class='{open: open}' style='width: 200px;'>" +
            "<button type='button' class='btn btn-small' style='width: 160px;height: 30px;'>---Select---</button>" +
            "<button type='button' class='btn btn-small dropdown-toggle' data-ng-click='openDropdown()' style='width: 40px;height: 30px;' ><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);
                    };
                }
            }
        });

        app.controller("MyController", function ($scope) {
            $scope.SelectedCountries = [{ "id": 1, "name": "India"}];
            $scope.Countries =
            [
                { "id": 1, "name": "India" },
                { "id": 2, "name": "United States" },
                { "id": 3, "name": "France" },
                { "id": 4, "name": "Russia" },
                { "id": 5, "name": "Germany" }
            ]
        });
    </script>
</head>
<body>
    <div ng-app="MyApp" ng-controller="MyController">
        <multiselect-dropdown model="SelectedCountries" options="Countries "></multiselect-dropdown>
        <div style="font-weight: bold;">
            Get Selected Country</div>
        <div data-ng-repeat="country in SelectedCountries">
            <ul>
                <li>{{country.name}}</li>
            </ul>
        </div>
    </div>
</body>
</html>

Demo