Angularjs multi select dropdown in bootstrap modal

Question

I'm an Angularjs newbie so I'm sorry for this question firstly.

I'm using Angular bootstrap modal from: https://angular-ui.github.io/bootstrap/

and multi select dropdown list from: https://codepen.io/long2know/pen/PqLRyZ

I don't know how to use them together.

I had a module and controller:

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");
    };
});

That means I click(tap) the element then open the modal. This is not all of my code.

Can anyone suggest me how to use the dropdown list in modal.

Thanks you so much.

mkarrfan mkarrfan · Accepted Answer · 2017-10-07T02:22:35

Angular Material provides the multi-select feature anyway.

Link: https://material.angularjs.org/latest/demo/select

It is easier and has harmony in design. you can use the other UI elements to keep the interface consistence also.

Angularjs multi select dropdown in bootstrap modal

1 Answers