Multi Select Drop Down List with Bootstrap & AngularJS

Dariush Tasdighi

Rate me:

5.00/5 (12 votes)

8 Apr 2015MIT1 min read

111.1K

2.7K

Multi Select Drop Down List Directive with Latest Bootstrap and AngularJS

Download source - 2.1 MB

Introduction

Multi Select Drop Down List Directive with latest versions of Bootstrap and AngularJS.

Using the Code

HTML

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />

    <title>Creating Multi Select Drop Down List</title>

    <link href="Content/bootstrap.min.css" rel="stylesheet" />

    <script src="Scripts/angular.min.js"></script>

    <script>

        // **************************************************
        // *** My AngularJS Directive(s) Application ********
        // **************************************************
        var varMyDirectivesApplication =
            angular.module('myDirectivesApplication', []);

        varMyDirectivesApplication.directive('dropdownMultiselect', function () {
            return {
                restrict: 'E',
                scope: {
                    model: '=',
                    options: '=',
                },
                template:
                        "<div class='btn-group' data-ng-class='{open: open}'>" +
                            "<button class='btn btn-small'>Select...</button>" +
                            "<button class='btn btn-small dropdown-toggle' 
                            data-ng-click='openDropdown()'>
                            <span class='caret'></span></button>" +
                            "<ul class='dropdown-menu' aria-labelledby='dropdownMenu'>" +
                                "<li><a data-ng-click='selectAll()'>
                                <span class='glyphicon glyphicon-ok green' 
                                aria-hidden='true'></span> Check All</a></li>" +
                                "<li><a data-ng-click='deselectAll();'>
                                <span class='glyphicon glyphicon-remove red' 
                                aria-hidden='true'></span> Uncheck All</a></li>" +
                                "<li class='divider'></li>" +
                                "<li 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.id);
                        });
                    };

                    $scope.deselectAll = function () {
                        $scope.model = [];
                    };

                    $scope.toggleSelectItem = function (option) {
                        var intIndex = -1;
                        angular.forEach($scope.model, function (item, index) {
                            if (item == option.id) {
                                intIndex = index;
                            }
                        });

                        if (intIndex >= 0) {
                            $scope.model.splice(intIndex, 1);
                        }
                        else {
                            $scope.model.push(option.id);
                        }
                    };

                    $scope.getClassName = function (option) {
                        var varClassName = 'glyphicon glyphicon-remove red';
                        angular.forEach($scope.model, function (item, index) {
                            if (item == option.id) {
                                varClassName = 'glyphicon glyphicon-ok green';
                            }
                        });
                        return (varClassName);
                    };
                }
            }
        });
        // **************************************************
        // *** /My AngularJS Directive(s) Application *******
        // **************************************************

        // **************************************************
        // *** Your AngularJS Application *******************
        // **************************************************
        var varMyApplication =
            angular.module('myApplication', ['myDirectivesApplication']);

        varMyApplication.controller('myController', function ($scope) {

            $scope.users = [
                { "id": 1, "name": "Ali" },
                { "id": 2, "name": "Sara" },
                { "id": 3, "name": "Babak" },
                { "id": 4, "name": "Sanaz" },
                { "id": 5, "name": "Dariush" },
            ];

            $scope.selectedUserIds = [3, 5];

        });
        // **************************************************
        // *** /Your AngularJS Application ******************
        // **************************************************

    </script>

    <style>
        ul.dropdown-menu li {
            cursor: pointer;
        }

            ul.dropdown-menu li span.red {
                color: red;
            }

            ul.dropdown-menu li span.green {
                color: green;
            }
    </style>
</head>
<body>
    <div class="container" ng-app="myApplication" 
    ng-controller="myController">
        <br />
        <br />

        <div class="row">
            <div class="col-xs-6">
                <dropdown-multiselect model="selectedUserIds" 
                options="users"></dropdown-multiselect>
            </div>
            <div class="col-xs-6">
                <ul>
                    <li data-ng-repeat="item in selectedUserIds">
                        {{ item }}
                    </li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>

In this source code, we have 4 parts:

Part (1) "My AngularJS Directive(s) Application"

In this part, I created my AngularJS application that has just one Directive with the name of "dropdownMultiselect". I prefer you put this part to a JavaScript file (.js), instead of putting this source code directly to page!

Part (2) "Your AngularJS Application"

In this part, you write your own AngularJS application. If you want to use my AngularJS application that has "Multi Select Drop Down List" Directive, you should write:

JavaScript

var varMyApplication =
    angular.module('myApplication', ['myDirectivesApplication']);

The above code means your AngularJS application should use another AngularJS application.

Part (3) "Styles"

I used just 3 simple styles for display items in beauty. ;-)

Part (4) "View"

In this part, you can write many "dropdown-multiselect" tags (elements) as you wish. Note that this Element Directive has two attributes:

options: With this attribute, you can bind your drop down list to some items.
model: With this attribute, you can bind your drop down list to some selected Id(s).

Note: You can simply change this AngularJS Directive for creating your own simple (Single Select) drop down list.

Anyway, I think that this is a simple practical source code that teaches you how to write your own AngularJS Directives.

License

This article, along with any associated source code and files, is licensed under The MIT License

Written By

Dariush Tasdighi

Web Developer Sematec Ins.

Iran (Islamic Republic of)

My experiences are:

HTML 5.0, CSS 3.0
JQuery, Angular JS, Bootstrap

MVC 5.0, WEB API, c#

My Site URLs:
http://www.IranianExperts.ir
http://www.IranianExperts.com

My Yahoo Group URL: http://groups.yahoo.com/group/iranianexperts

Mobile: 0098-912-108-7461
Address: Tehran, Tehran, Iran

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.