Multiselect DropDownList in AngularJS

Last Reply 11 months ago By dharmendr

Posted 11 months ago

How to use multiselect dropdownlist with checkbox in angularjs

And how to get the selected text and value.

 


Posted 11 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