How to call event from checkbox element only if checkbox is checked - angularjs

Question

Here is my rows code:
angular.module('myApp', [])
.controller('Ctrl', ['$scope', function($scope) {
$scope.foo = function() {
alert("bla bla bla");
};
}]);
#rollDiv {
margin:4px;
background-color:#EFEFEF;
border-radius:4px;
border:1px solid #D0D0D0;
overflow:auto;
float:left;
}
#rollDiv label span {
padding:5px 5px 2px 2px;
display:block;
}
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="Ctrl">
<label>
<input type='checkbox' ng-click='foo()' hidden><span class=" glyphicon glyphicon-list-alt"></span>
</label>
</div>
At the example above foo event is fired when element checked and unchecked, can I make a call of the event from checkbox element only if checkbox is checked and event not called if I uncheck element.I don't feel like making any changes in controller.

Answer 1

Here is what you are looking for.
<input type='checkbox' ng-model='chkMonitor' ng-click='chkMonitor && foo()'>
chkMonitor is just a simple scope variable.
Explanation:
foo() function can be conditionally executed by placing it in a boolean expression. The following ...
ng-click='false && foo()'
will never execute the function. So, the task is to replace false with a variable which represent the check state. We can use $event.target.checked - but DOM referencing in angular expression is prohibited.
Solution is to bind a scope variable with the check box and use it with foo()
Of course there are conventional methods which can filter out clicks inside the foo() function. But your question was about NOT firing foo() if not checked.

Answer 2

Look this:
angular.module('myApp', [])
.controller('Ctrl', ['$scope',
function($scope) {
$scope.foo = function() {
console.log("bla bla bla");
};
}
]);
#rollDiv {
margin: 4px;
background-color: #EFEFEF;
border-radius: 4px;
border: 1px solid #D0D0D0;
overflow: auto;
float: left;
}
#rollDiv label span {
padding: 5px 5px 2px 2px;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="Ctrl">
<label>
<input type='checkbox' ng-model="cbxTest" ng-click='read?"":foo();read=true' hidden><span class=" glyphicon glyphicon-list-alt"></span>
</label>
</div>