How to detect checkbox clicked in AngularJS? - angularjs

Question

I am using a javascript UI library as DHTMLX or YUI etc.
And I am using AngularJS to process dynamic page.
What I need is just simple.
UI code is
...
<Input type="checkbox" name="XXX" />
....
My.js
...
app.controller('XXXCtrl', function($scope){
$scope.$watch(???){
if (XXX) console.log("checkbox was checked!!!");
else console.log("checkbox was unchecked!!!");
????
};
})
I am new to AngularJS. Please help me!!!

Answer 1

You have to bind the value to the scope via ng-model. There is more detail in the documentation, but you can do something like that:
$scope.checkboxModel = true;
$scope.myAction = function () {
msg = $scope.checkboxModel ? 'checked' : 'unchecked';
console.log(msg);
};
And in your HTML file:
<form name="myForm" ng-controller="XXXCtrl">
<label>Value1:
<input type="checkbox" name="XXX" ng-model="checkboxModel" ng-change="myAction()">
</label><br/>
<tt>value1 = {{checkboxModel}}</tt><br/>
</form>

Answer 2

You can access to the window object using document.getElementById combined with ng-click event listener
var app = angular.module('myApp', []);
app.controller('appCtrl', function($scope) {
$scope.checker= function(e){
var chkBox = document.getElementById(e.target.id);
console.log(chkBox.checked)
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='myApp'>
<div ng-controller='appCtrl'>
<input type="checkbox" id="myCheckbox" name="myCheckbox" ng-click="checker($event)"/>
</div>
</div>