如何在anguler1，Bootstrap3中添加多选复选框下拉列表

Question

我是angulerJS的新手，所以不知道如何添加多选复选框下拉列表。 这是我的部分 html，显示多选。我希望它呈带有复选框的下拉菜单形状，如下图代码后所示。

<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 />

这是我的控制器填充多选的完整代码

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();
        }]);

我想知道，如何实现以下类型的多选复选框下拉菜单。

以及如何在控制器中获取选定的组（复选框）值

应用程序是在anguler1、bootstrap3中制作的。

注意：项目中的所有文件都是手动包含的。没有包 json 等

Answer 1

我包含的文件

<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 更改为

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

然后我如何应用多选检查代码中的注释，jQuery已经包含在代码中，所以我只需在加载多选选项后在init函数中应用多选

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();
        }]);

并获取我所做的值

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