1

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.

1 Answer 1

2

Angular Material provides the multi-select feature anyway.

enter image description here

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.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.