Suresh PMS Suresh PMS - 12 days ago 6
AngularJS Question

angular disable apply button if none of the div is clicked

The requirement is simple. I have to enable the Apply button only if atleast one of the div is selected to green. Suggest some idea please.. Have given the running snippet below for reference. Thanks!



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




Answer

You could do something like this, have a property that keeps track of the selected divs and have ng-disabled on that property, in the example is 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>

Comments