角度禁用應用按鈕如果沒有任何div被點擊

要求很簡單。我必須啓用應用按鈕，只有至少一個div被選爲綠色。建議一些想法，請給出以下運行代碼供參考。謝謝！角度禁用應用按鈕如果沒有任何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;}

<!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}, {name:'Chart2',selected:false},{name:'Chart3',selected:false},{name:'Chart4',selected: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}"></div> 
 
      <div class="aw-right-pane-charts-name"> {{chart.name}}</div> 
 
     </div> 
 
<button disabled>Apply</button> 
 
    </div> 
 
    </body> 
 
</html>

來源

2016-11-21 Suresh PMS

您可以用'NG-disabled'像'<按鈕NG-禁用= 「表達」>應用' – Hemakumar

感謝Hemakumar ..其實我找只表達..難道你請執行你的解決方案的片段，並讓我知道請.. –

你可以做這樣的事情，有一個跟蹤選定的div的屬性，並有NG在該屬性上禁用，在示例中爲selectionCount。

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

<!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}, {name:'Chart2',selected:false},{name:'Chart3',selected:false},{name:'Chart4',selected:false}]"> 
 
    <div data-ng-repeat="chart in chartsOfSelectedDatatype" class="aw-right-pane-charts" ng-init="$parent.selectionCount = 0"> 
 
     <div ng-click="chart.selected = !chart.selected; $parent.selectionCount = (chart.selected == true ? $parent.selectionCount+1 : $parent.selectionCount-1)" class="charts" ng-class="{'aw-dataType-selected':chart.selected}"></div> 
 
     <div class="aw-right-pane-charts-name">{{chart.name}}</div> 
 
    </div> 
 
    {{selection}} 
 
    <button ng-disabled="selectionCount == 0">Apply</button> 
 
    </div> 
 
</body> 
 

 
</html>

來源

2016-11-21 06:31:14 Sreekanth

Sreekanth，這很酷..非常感謝。 :)及時的幫助..這是我的期望..我甚至有一個側面菜單，每個選項中有一組圖表divs ..從任何選項中選擇任何一個應該啓用應用..你的$父母，解決我的要求.. :) –

很酷。很高興幫助！ – Sreekanth

@Sreekanth真的很好的答案....我沒有得到這個想法...它幫助... :) – Hemakumar

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

<!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}, {name:'Chart2',selected:false},{name:'Chart3',selected:false},{name:'Chart4',selected: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}"></div> 
 
      <div class="aw-right-pane-charts-name"> {{chart.name}}</div> 
 
     </div> 
 
<button ng-disabled="(chartsOfSelectedDatatype | filter:{ selected: true }).length == 0">Apply</button> 
 
    </div> 
 
    </body> 
 
</html>

這將幫助你

來源

2016-11-21 06:27:16

非常感謝J-Mean :) –

歡迎:) Suresh –

角度禁用應用按鈕如果沒有任何div被點擊

回答

相關問題