引导模式中的Angularjs多选下拉菜单

Posted 2023-03-14

【中文标题】引导模式中的Angularjs多选下拉菜单

【英文标题】：Angularjs multi select dropdown in bootstrap modal

【发布时间】：2017-10-07 01:56:33

【问题描述】：

我是 Angularjs 新手，所以我很抱歉首先提出这个问题。

我正在使用来自：https://angular-ui.github.io/bootstrap/ 的 Angular 引导模式

和多选下拉列表来自：https://codepen.io/long2know/pen/PqLRyZ

我不知道如何一起使用。

我有一个模块和控制器：

var app = angular.module("opsApp", ["$jsOps", "ngAnimate", "ngSanitize", "ui.bootstrap"]);
app.controller("OpsLayoutController", function ($uibModal, $log, $document, $scope, $http, jsPlumbService) 
this.renderParams = 
        view: 
            processes: 
                "default": 
                    template: "process",
                    events: 
                        tap: function (params) 
                            var modalInstance = $uibModal.open(
                                animation: $scope.animationsEnabled,
                                ariaLabelledBy: "modal-title",
                                ariaDescribedBy: "modal-body",
                                templateUrl: "editNodeModal.html",
                                controller: "ProcessModalInstanceCtrl",
                                controllerAs: "$ctrlProcess",
                                size: "lg",
                                appendTo: undefined,
                                resolve: 
                                    process: function () 
                                        return params.process.data;
                                    
                                
                            );

                            modalInstance.result.then(function (process) 

                            , function () 
                                $log.info("Modal dismissed at: " + new Date());
                            );
                        
                    
                
            

app.controller("ProcessModalInstanceCtrl", function ($uibModalInstance, process) 

    $ctrlProcess.process= process;

    $ctrlProcess.ok = function () 
        $uibModalInstance.close(process);
    ;

    $ctrlProcess.cancel = function () 
        $uibModalInstance.dismiss("cancel");
    ;
);

这意味着我单击（点击）元素然后打开模式。 这不是我的全部代码。

谁能建议我如何在模态中使用下拉列表。

非常感谢。

【参考方案1】：

Angular Material 无论如何都提供了多选功能。

链接：https://material.angularjs.org/latest/demo/select

它更容易并且在设计上具有和谐性。您也可以使用其他 UI 元素来保持界面的一致性。