如何关闭提交按钮单击时的下拉菜单？

Question

I have this html code for my setting box. On click of setting icon I am displaying this. I am using angular framework.

Everything is working fine.

HTML

<!-- Template code for Setting Unit Popup details -->
<div class="dropdown">
    <i class="fa fa-2x fa-fw fa-gear app-margin-top dropdown-toggle" id="dropdownMenu1" data-toggle="popover"></i>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <div class="col-md-12" id="settingUnitPopup">
            <form class="form-horizontal" role="form">
                <div class="form-group custom-border-top">
                    <div class="col-md-7">
                        <label>{{'csr:CSR.SERVICE_DETAIL.SETTING_POPUP.VOLUME_UNIT' | i18next}}</label>
                    </div>
                    <div class="col-md-5">
                        <select class="form-control input-sm" ng-options="volumeUnit.unit as volumeUnit.name for volumeUnit in volumeUnits" ng-model="selectedvolumeUnit"></select>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-7">
                        <label>{{'csr:CSR.SERVICE_DETAIL.SETTING_POPUP.FLOW_UNIT' | i18next}}</label>
                    </div>
                    <div class="col-md-5">
                        <select class="form-control input-sm" ng-options="flowUnit.unit as flowUnit.name for flowUnit in flowUnits" ng-model="selectedflowUnit"></select>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-8">
                        <label>{{'csr:CSR.SERVICE_DETAIL.SETTING_POPUP.TEMP_UNIT' | i18next}}</label>
                    </div>
                    <div class="col-md-4">
                        <select class="form-control input-sm" ng-options="tempUnit.unit as tempUnit.name for tempUnit in tempUnits" ng-model="selectedtempUnit"></select>
                    </div>
                </div>
                <div class="form-group custom-border-top">
                    <div class="col-md-12">
                        <button type="button" class="btn btn-primary pull-left" data-ng-click="settingUnit()">{{'csr:CSR.SERVICE_DETAIL.SETTING_POPUP.SUBMIT' | i18next}}</button>
                    </div>
                </div>
            </form>
        </div>
    </ul>
</div>

JS code

// setting unit values using local storage on click of submit for the account number
$scope.settingUnit = function () {
    $log.log("Setting the unit values");
    var mockAccountInfo = [{
        volumeUnitsSelected: $scope.selectedvolumeUnit,
        flowUnitsSelected: $scope.selectedflowUnit,
        tempUnitsSelected: $scope.selectedtempUnit
    }];
    // Here we are going to set the all set values for the setting popup for the account number
    localStorage.setItem($scope.csrServiceModel.accountDetails.accountNumber, JSON.stringify(mockAccountInfo));

    //angular.element('[class="dropdown-menu"]').hide();
};

The problem I am facing is: on click of submit button, I want to close the element which opens on setting icon click.

Answer 1

What you need to use bootstrap modal popup, refer http://angular-ui.github.io/bootstrap/ look for Modal (ui.bootstrap.modal). Keep your existing code as it is and wrap it the modal popup.