How to add multiSelect Checkbox dropdown in anguler1 , Bootstrap3

Question

i am new to angulerJS, so have no idea on how to add multi-select Checkbox dropdown list. Here is my partial html that show multi-select. I want it to be in shape of dropdown with checkbox as shown in the pic below after code.

<select id="example-getting-started" class="multiselect" data-placeholder="Select User Groups" ng-model="groupselection" ng-options="group as group for group in groups" multiple="multiple" multiselect-dropdown />

And here is my controller full code that populate the multi-select

app.controller('MyObjectsAddSelectedController',
    ['$http', '$scope', '$modalInstance','$modal', '$translate', '$location', '$window', '$anchorScroll', 'config', 'ApiService', 'Flash', 'user_id', 'userObjects',
        function($http, $scope, $modalInstance, $modal, $translate, $location,$window, $anchorScroll, config, ApiService, Flash, user_id, userObjects) {

            $scope.user_id = null;
            $scope.notGroup = false;
            $scope.formProcessing = false;
            $scope.leadUrl = config.leadUrl;            
            $scope.groups=[];
             
            
            var init = function() {
                $scope.groups=[];
                $scope.user_id = user_id;
                //$scope.userObjects = userObjects;
                $('#loadingDiv').show();
                $http.get(config.api.url + '/get_user_group_name/' + $scope.user_id).then(function (response) {
                    if(response.data.error == 'not_group'){
                        $scope.notGroup = true;
                    }else {
                        $scope.notGroup = false;
                        angular.forEach(response.data, function (value, key) {
                            $scope.groups[key] = value;

                        });
                    }

                });
                if($('#loadingDiv').hide()){
                    setTimeout(function () {
                        $("#ob_hier").css("display", "block");
                    }, 1100);
                }
            };            
            //init controller
            init();
        }]);

I want to know, how i can achieve following kind of multi-select checkbox dropdown.

And how to get the selected groups(checkbox) values after in the controller

the application is made in anguler1, bootstrap3.

Note: in the project all files are manually included. no package json etc

muhammad Yousaf · Accepted Answer · 2024-06-25 09:26:19Z

files i included

<link rel="stylesheet"  href="./css/bootstrap/css/bootstrap-multiselect.css?v=1718347038"/>

<script type="text/javascript" src="./css/bootstrap/js/bootstrap-multiselect.min.js?v=1718347094"></script>

HTML changed to

<select id="example-getting-started" class="multiselect" data-placeholder="Select User Groups" ng-model="groupselection" multiple="multiple" multiselect-dropdown>
                            <option id="[[group]]" data-ng-repeat="group in groups" value="[[group]]">[[group]]</option>
                        </select>

then how i applied multi-select check the comment inside code, jQuery was already included in the code, so i just have to apply multi-select inside init function after loading the options of multi-select

app.controller('MyObjectsAddSelectedController',
    ['$http', '$scope', '$modalInstance','$modal', '$translate', '$location', '$window', '$anchorScroll', 'config', 'ApiService', 'Flash', 'user_id', 'userObjects',
        function($http, $scope, $modalInstance, $modal, $translate, $location,$window, $anchorScroll, config, ApiService, Flash, user_id, userObjects) {

            $scope.user_id = null;
            $scope.notGroup = false;
            $scope.formProcessing = false;
            $scope.leadUrl = config.leadUrl;            
            $scope.groups=[];
             
            
            var init = function() {
                $scope.groups=[];
                $scope.user_id = user_id;
                //$scope.userObjects = userObjects;
                $('#loadingDiv').show();
                $http.get(config.api.url + '/get_user_group_name/' + $scope.user_id).then(function (response) {
                    if(response.data.error == 'not_group'){
                        $scope.notGroup = true;
                    }else {
                        $scope.notGroup = false;
                        angular.forEach(response.data, function (value, key) {
                            $scope.groups[key] = value;

                        });
                       /// this is how i have applied the multiselect
                       setTimeout(function(){
                            $('#example-getting-started').multiselect();   
                        },250);
                    }

                });
                if($('#loadingDiv').hide()){
                    setTimeout(function () {
                        $("#ob_hier").css("display", "block");
                    }, 1100);
                }
            };            
            //init controller
            init();
        }]);

and to get the values i have done this

var checkGroup = $('#example-getting-started option:selected');

Collectives™ on Stack Overflow

How to add multiSelect Checkbox dropdown in anguler1 , Bootstrap3

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related