Suresh PMS Suresh PMS - 8 days ago 4
HTML Question

Angular Trigger Div Click based on condition

I need to disable click on certain divs based on some condition. Can anyone guide me please? Currently am using ng-disabled which is not working

Working Demo below for you to play



.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

You cannot disable a div using ng-disabled the possible solutions are either you can add an ng-class for disabled elements with no cursor events or you can use a fieldset instead of div.

First Solution - Using ng-class and changing script handling clickable property

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

Second Solution. Using fieldset instead if div.

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

I will prefer the second one.