Question

我的设置框中有这个html代码。点击设置图标我显示这个。我正在使用角度框架。

一切都很好。

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

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

我面临的问题是：点击提交按钮，我想关闭设置图标点击时打开的元素。

Answer 1

使用bootstrap模式弹出窗口需要什么，请参考http://angular-ui.github.io/bootstrap/查找Modal（ui.bootstrap.modal）。保持现有代码不变并将其包装为模态弹出窗口。

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

1 个答案: