Angular js not firing change event on an already checked checkbox
Question
Please check out this fiddle here . I am getting this weird behaviour from angular on change event on an initially checked chekbox. I checked this using jquery as well. The jquery event fires properly whilst the angular event fires only when the checked is initially unchecked.
Here is my complete code btw:
<html ng-app="testing">
<head>
<title>Angular ng-change test</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<div class="row" ng-controller="ChgCtrl">
<div class="col-md-12">
<form>
<div class="form-group">
<span class="text-info">ng-change</span>
<input type="checkbox" ng-model="formElem.checkbox" ng-change="toggleChange(formElem.checkbox)" ng-checked="formElem.checkbox == 1"/>
</div>
</form>
</div>
<div class="col-md-12">
<div class="col-md-6">
<h3>JQuery change event:</h3>
<P id="jq-messages"></p>
</div>
<div class="col-md-6">
<h3>Angular change event:</h3>
<p>{{message_change}}</p>
</div>
<p class="text-danger">Please note the first click on checkbox.</p>
</div>
</div>
<script type="text/javascript">
var app = angular.module('testing', []);
app.controller('ChgCtrl', function ($scope) {
$scope.formElem = {
checkbox: 1
};
$scope.message_change = '';
$scope.toggleChange = function (data) {
$scope.message_change = data === true ? 'Checked' : 'Unchecked';
console.info(data === true ? 'Checked' : 'Unchecked');
};
});
$(function () {
$('input[type=checkbox]').on('change', function (e) {
$('#jq-messages').html($(this).is(':checked') ? 'Checked' : 'Unchecked');
console.log($(this).is(':checked'));
});
});
</script>
</body>
3 answers
solution1
1 2015-08-30 15:44:37
You can do this with pure angular - jQuery is not needed.
Remove your ng-change and ng-checked attributes and just use ng-model :
<input type="checkbox" ng-model="formElem.checkbox"/>
Then toggle your text with ng-show and the model:
<p ng-show="formElem.checkbox">checked!</p>
<p ng-show="!formElem.checkbox">not checked.</p>
solution2
0 ACCPTED 2015-08-30 15:39:28
Removed ng-checked attribute, changed type of $scope.formElem.checkbox , corrected if statement ($scope.formElem.checkbox ? 'Checked' : 'Unchecked')
var app = angular.module('testing', []); app.controller('ChgCtrl', function ($scope) { $scope.formElem = { checkbox: true }; $scope.message_change = ''; $scope.toggleChange = function (data) { $scope.message_change = ($scope.formElem.checkbox ? 'Checked' : 'Unchecked'); console.info(data === true ? 'Checked' : 'Unchecked'); }; }); $(function () { $('input[type=checkbox]').on('change', function (e) { $('#jq-messages').html($(this).is(':checked') ? 'Checked' : 'Unchecked'); console.log($(this).is(':checked')); }); });
<body ng-app="testing"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <div class="row" ng-controller="ChgCtrl"> <div class="col-md-12"> <form> <div class="form-group"> <span class="text-info">ng-change</span> <input type="checkbox" ng-model="formElem.checkbox" ng-change="toggleChange(formElem.checkbox)" /> </div> </form> </div> <div class="col-md-12"> <div class="col-md-6"> <h3>JQuery change event:</h3> <P id="jq-messages"></p> </div> <div class="col-md-6"> <h3>Angular change event:</h3> <p>{{message_change}}</p> </div> <p class="text-danger">Please note the first click on checkbox.</p> </div> </div> </body>
ng-change event handler, as the name implies, will fire on target value change, but you are just initializing values, not changing them
solution3
0 2015-08-30 16:03:59
My suggestion is not to use Jquery and do it with all angularJS. Also in controller if you want to see change , use $scope.$watch . Her is demo .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.