Angular JS不觸發已選中復選框的更改事件
[英]Angular js not firing change event on an already checked checkbox
問題描述
請在這里查看這個小提琴 。 我從最初檢查的復選框上的更改事件中的角度得到這種奇怪的行為。 我也使用jquery進行了檢查。 僅當最初未選中checked時，jquery事件才能正確觸發，而angular事件則觸發。
這是我完整的代碼：
<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 個解決方案
解決方案1
1 2015-08-30 15:44:37
您可以使用純角度進行此操作-不需要jQuery。
刪除ng-change和ng-checked屬性，僅使用ng-model ：
<input type="checkbox" ng-model="formElem.checkbox"/>
然后使用ng-show和模型切換文本：
<p ng-show="formElem.checkbox">checked!</p>
<p ng-show="!formElem.checkbox">not checked.</p>
解決方案2
0 已采納 2015-08-30 15:39:28
刪除了ng-checked屬性，更改了$scope.formElem.checkbox類型，更正了if語句($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事件處理程序將在目標值更改時觸發，但您只是初始化值，而不更改它們
解決方案3
0 2015-08-30 16:03:59
我的建議是不要使用Jquery並與所有angularJS一起使用。 同樣在控制器中，如果您想查看更改，請使用$scope.$watch 。 她是演示 。
檢測復選框是否在 Angular.js ng-change 事件中被選中或取消選中
[英]Detect if checkbox is checked or unchecked in Angular.js ng-change event
Angular-Kendo treeview復選框更改事件觸發多次
[英]Angular - Kendo treeview checkbox change event firing multiple times
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.