Question

我需要根据某些条件禁用点击某些div。有人可以指导我吗？目前正在使用 ng-disabled ，但无效

下面的工作演示供你玩

.aw-right-pane-content{height:200px; width:200px;}
.aw-dataType-selected{background:green;}

.charts{
  height:30px; width:30px;
  border:1px solid #ccc; 
  margin:20px 0 0 10px;}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
    <html ng-app>
    <head>
    <script src="https://code.angularjs.org/1.4.9/angular.js"></script>
    </head>
    <body>
<div class="aw-right-pane-content" 
     ng-init="chartsOfSelectedDatatype=[{name:'Chart1',selected:false,clickable:false},   {name:'Chart2',selected:false,clickable:true},{name:'Chart3',selected:false,clickable:true},{name:'Chart4',selected:false,clickable:false}]">
       <div data-ng-repeat="chart in chartsOfSelectedDatatype" class="aw-right-pane-charts" >
          <div ng-click="chart.selected = !chart.selected" class="charts" ng-class="{'aw-dataType-selected':chart.selected}" ng-disabled = "chart.clickable"></div>
          <div class="aw-right-pane-charts-name"> {{chart.name}}</div>
        </div>

  </div>
  </body>
</html>

Answer 1

您可以按照以下方式执行此操作：

<div class="aw-right-pane-content" 
 ng-init="chartsOfSelectedDatatype=[{name:'Chart1',selected:false,clickable:false},   {name:'Chart2',selected:false,clickable:true},{name:'Chart3',selected:false,clickable:true},{name:'Chart4',selected:false,clickable:false}]">
  <div data-ng-repeat="chart in chartsOfSelectedDatatype" class="aw-right-pane-charts" >
      <div ng-click="chart.clickable ? chart.selected = !chart.selected: ''" class="charts" ng-class="{'aw-dataType-selected':chart.selected}"></div>
      <div class="aw-right-pane-charts-name"> {{chart.name}}</div>
  </div>
</div>

Answer 2

您无法使用ng-disabled禁用div可能的解决方案是您可以为没有光标事件的已禁用元素添加ng-class，或者您可以使用fieldset而不是div。

第一个解决方案 - 使用ng-class并更改处理可点击属性的脚本

＆＃13;

<!DOCTYPE html>
<html ng-app>

<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<style>
    .aw-right-pane-content {
        height: 200px;
        width: 200px;
    }
    
    .aw-dataType-selected {
        background: green;
    }
    
    .charts {
        height: 30px;
        width: 30px;
        border: 1px solid #ccc;
        margin: 20px 0 0 10px;
    }
    .disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }
</style>
</head>

<body>
<div class="aw-right-pane-content" ng-init="chartsOfSelectedDatatype=[{name:'Chart1',selected:false,clickable:false},   {name:'Chart2',selected:false,clickable:true},{name:'Chart3',selected:false,clickable:true},{name:'Chart4',selected:false,clickable:false}]">
    <div data-ng-repeat="chart in chartsOfSelectedDatatype" class="aw-right-pane-charts">
        <div ng-click="(chart.clickable)? chart.selected = !chart.selected : chart.selected = chart.selected" class="charts" ng-class="{'aw-dataType-selected':chart.selected, 'disabled': !chart.clickable}"></div>
        <div class="aw-right-pane-charts-name"> {{chart.name}} - {{chart.clickable}}</div>
    </div>

</div>
</body>

</html>

＆＃13;

第二个解决方案。使用fieldset代替div。

＆＃13;

<!DOCTYPE html>
<html ng-app>

<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<style>
    .aw-right-pane-content {
        height: 200px;
        width: 200px;
    }
    
    .aw-dataType-selected {
        background: green;
    }
    
    .charts {
        height: 30px;
        width: 30px;
        border: 1px solid #ccc;
        margin: 20px 0 0 10px;
    }
</style>
</head>

<body>
<div class="aw-right-pane-content" ng-init="chartsOfSelectedDatatype=[{name:'Chart1',selected:false,clickable:false},   {name:'Chart2',selected:false,clickable:true},{name:'Chart3',selected:false,clickable:true},{name:'Chart4',selected:false,clickable:false}]">
    <div data-ng-repeat="chart in chartsOfSelectedDatatype" class="aw-right-pane-charts">
        <fieldset ng-click="chart.selected = !chart.selected" class="charts" ng-class="{'aw-dataType-selected':chart.selected}" ng-disabled="!chart.clickable"></fieldset>
        <div class="aw-right-pane-charts-name"> {{chart.name}} - {{chart.clickable}}</div>
    </div>

</div>
</body>

</html>

＆＃13;

我更喜欢第二个。

Answer 3

您可以对不需要点击的元素应用常见的class，并将pointer-events: none;应用于相同的元素。

在这种情况下，CSS应始终是首选，而不是Javascript。

角度触发器Div根据条件单击

3 个答案: