Angular Trigger Div根據條件的不同點擊

我需要根據某些條件禁用某些div的點擊。任何人都可以引導我嗎？目前正在使用NG-禁用這是不低於工作Angular Trigger Div根據條件的不同點擊

工作演示給你玩

.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>

來源

2016-12-01 Suresh PMS

我不知道這是問題，但'ng-disabled = chart.clickable'應該是'ng-disabled =「chart.clickable」' –

你不能使用ng-disabled來禁用div，可能的解決方案就是你可以爲沒有光標事件的禁用元素添加ng-class，或者您可以使用fieldset而不是div。

首個解決方案 - 使用ng-class和不斷變化的腳本處理點擊屬性

<!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>

第二種解決。如果使用div，則使用fieldset。

<!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>

我會選擇第二個。

來源

2016-12-01 10:14:40 Nitheesh

非常感謝:) –

歡迎:) – Nitheesh

可以按如下方式做到這一點：

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

來源

2016-12-01 10:02:24 ranakrunal9

@ ranakrrunal9，謝謝您的輸入。我需要單獨的點擊處理程序以及連接 –

您可以對不需要點擊的元素應用通用的class，並將pointer-events: none;應用於相同的元素。

在這種情況下，CSS應該總是首選，而不是Javascript。

來源

2016-12-01 11:04:01 nashcheez

Angular Trigger Div根據條件的不同點擊

回答

相關問題