Question

我想禁用父级背景div，其中包含带数据的网格。在网格上有一些选项，如排序和导出数据到csv/pdf。此外，在此网格上有一个过滤器按钮，点击该过滤器按钮（通过ng-click= xyz();）过滤器覆盖。这是父div内的子容器div。我希望在此过滤器覆盖div打开时禁用父网格div，即禁用排序和导出以及父div上的任何其他功能。

任何人都有帮助吗？我的整个项目都在angular js。演示的一个例子很棒！

在agg.service.js

angular.module('ccar14a.common').factory('ccar14a.common.AggService', [
'ccar14a.common.Config',
'StatusService',
'ccar14a.common.TcnService',
'ccar14a.common.PivotService',
'ccar14a.common.GridConfigService',
'$timeout',
function(Config, StatusService, TcnService, PivotService, GridConfigService, $timeout) {

    var service = { 
            openFilterOverlay: function() {
            console.log("Toggle Filter overlay00");

           var filteroverlay = angular.element(".filter-overlay");

           if(filteroverlay.hasClass('open')) {

               filteroverlay.removeClass('open');
           } else {
               filteroverlay.addClass('open');
           }
            angular.element('.tooltip').hide();
        },
   };

    return service;
   }]);

在 index.html

中

<div class="col-md-12 main-view" ng-controller="ccar14a.common.drillDownController">

<div class="ddt-container">
    <h2>
    <span>
        {{config.title}} v{{config.version}}.
        <a href="" ng-click="getInitialFilter(true)"
                    ng-disabled="aggService.gridDisconnected" ng-if="config.initialTitle">
            {{config.initialTitle}}</a>
        <!--<span class="pull-right" style="font-size: 10px">, RDA: {{config.rda}}</span>-->
        <!--<span class="pull-right" style="font-size: 10px">Bridge: {{config.bridge | bridgeDomain}}</span>-->
    </span>
    <div class="ddt-links pull-right">
        <a href="" ng-click="about()">
            About</a>
        <a href="" ng-click="help()">
            Help</a>
    </div>
</h2>
</div>

<!--div container for filter overlay starts here-->

<div class="container-fluid ddt-container" ng-controller="ccar14a.common.drillDownController" id="ccar14a">
    <h2 ng-hide="true" class="remove">
    <span>
        {{config.title}} v{{config.version}}.
        <a href="" ng-click="getInitialFilter(true)"
                    ng-disabled="aggService.gridDisconnected" ng-if="config.initialTitle">
            {{config.initialTitle}}</a>
        <!--<span class="pull-right" style="font-size: 10px">, RDA: {{config.rda}}</span>-->
        <!--<span class="pull-right" style="font-size: 10px">Bridge: {{config.bridge | bridgeDomain}}</span>-->
    </span>
    <div class="ddt-links pull-right">
        <a href="" ng-click="about()">
            About</a>
        <a href="" ng-click="help()">
            Help</a>
    </div>
</h2>


    <div class="ddt-sidebar filter-overlay col-md-2">

        <div class="row">
            <div class="col-md-6">
                <div class="form-group ddt-filter-box-group">
                    <select class="form-control ddt-filter-box-fld" ng-model="savedFilter" ng-change="aggService.submitScenario(filter)">
                        <option value="">My Saved Filters</option>
                    </select>
                </div>
            </div>

            <div class="col-md-6">
                <button type="button" class="filter-close close-filter pull-right" ng-click="aggService.openFilterOverlay()"><i class="glyphicon glyphicon-remove filter-close"></i></button>

            </div>
        </div>

        <!--The code continues having several filter box  -->
 <div class="ddt-content col-xs-12" ng-class="{'col-md-10': !showControlPanel, 'col-xs-12' : !showControlPanel}">
            <div class="ddt-grid" ng-controller="ccar14a.common.AggController" ng-show="config.displaySummaryGrid">
                <ng-include src="'templates/summaryGrid.html' | embedUrl"></ng-include>
</div>

在 summaryGrid.html

中

<div class="grid-header">

<button type="button" class="btn btn-sm ddt-btn-medium pull-left" ng-show="true" ng-click="aggService.openFilterOverlay();">
    <i class="glyphicon glyphicon-filter" tooltip="Open Filter" tooltip-placement="right"></i>
</button>
<!-- Code for other functionalities continues-->
</div>

在 styles.css

中

.filter-overlay {
position: absolute;
left: -500px;
background: #EEE;
transition: 1s;
z-index: 1000;
box-shadow: 5px 5px 10px 3px #aaaaaa;
height: 100%;
min-width:365px;
overflow-y: auto;
 }

.filter-overlay.open {
transition: 1s;
left: 0;
}

.filter-overlay .row {
margin-left: 0;
margin-right: 0;
margin-top: 8px;
margin-botton: 12px;}

.container-fluid {
background-color: #F0F3F6;
height: 100%;
padding: 18px;}

.container-fluid .row{
margin-left: 0;
margin-right: 0;}

.ddt-content {
padding-left: 0;
padding-right: 0;
background-color: white;}

.tab-content > .tab-pane {
display: none;}

.tab-content > .active {
display: block;}

Answer 1

如果禁用父元素，那么很明显也会禁用子元素。您可以将这两个div作为兄弟姐妹放置，而不是将它们作为父级和子级，并根据元素的可见性单独隐藏它们。

当子容器div处于活动状态时，如何禁用父背景div？

1 个答案: