ng-单击复选框不更新表单的$ pristine属性 [英] ng-click on checkbox not updating $pristine property of form
问题描述
表单的$ pristine属性不会更新
我在AngularJS中有一个表单，我想知道表单的任何字段是否已更新.
更新复选框后，相应的$pristine属性不会更新.
因此，我添加了一个隐藏的文本框，该文本框绑定到复选框的同一ng-model.
但是它第一次不起作用，并且从第二次开始起作用.
HTML代码如下-
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.9.0.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="script.js"></script>
<body ng-app="formApp" ng-controller="formController">
<div>
<form name="myForm">
<label>Personal Question</label>
<div class="checkbox">
<label>
<input type="checkbox" name="awesome" ng-model="formData.awesome"
ng-true-value="ofCourse" ng-false-value="iWish"
ng-click="onClick()"> Are you awesome?
<input type="text" name="hidden-awesome" ng-model="formData.awesome"
ng-hide="true"/>
</label>
</div>
</form>
</div>
</body>
</html>
下面是AngularJS代码-
var formApp = angular.module('formApp', [])
.controller('formController', function($scope) {
$scope.onClick = function() {
alert('is myform is not modified? '+ $scope.myForm.$pristine);
console.log(JSON.stringify($scope.myForm))
};
});
我的代码位于此处为朋克车中.
我应该如何处理这种情况?
使用ng-change指令代替ng-click:
<input type="checkbox" name="awesome" ng-model="formData.awesome"
ng-true-value="ofCourse" ng-false-value="iWish"
̶n̶g̶-̶c̶l̶i̶c̶k̶=̶"̶o̶n̶C̶l̶i̶c̶k̶(̶)̶"̶
ng-change="onClick()" > Are you awesome?
ng-change指令添加了 $ viewChangeListener ，在用户操作控件后 会被调用.
ng-click指令添加了一个单击处理程序，该处理程序在被调用="nofollow noreferrer"> ngModelController 更新模型.
注意::可以使用 tab 键突出显示复选框，并使用 enter 键以及单击鼠标进行操作.
有关更多信息，请参见
$pristine property of the form is not updated when the hidden text is updated for first time AngularJS
I have got a form in AngularJS and I want to know if any field of the form is updated.
when a checkbox is updated, then the corresponding $pristine property is not updated.
So I added a hidden text box which is bind to same ng-model of a checkbox.
But it is not working for the first time and works from the second time on.
The HTML code is below -
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.9.0.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="script.js"></script>
<body ng-app="formApp" ng-controller="formController">
<div>
<form name="myForm">
<label>Personal Question</label>
<div class="checkbox">
<label>
<input type="checkbox" name="awesome" ng-model="formData.awesome"
ng-true-value="ofCourse" ng-false-value="iWish"
ng-click="onClick()"> Are you awesome?
<input type="text" name="hidden-awesome" ng-model="formData.awesome"
ng-hide="true"/>
</label>
</div>
</form>
</div>
</body>
</html>
And the AngularJS code is below -
var formApp = angular.module('formApp', [])
.controller('formController', function($scope) {
$scope.onClick = function() {
alert('is myform is not modified? '+ $scope.myForm.$pristine);
console.log(JSON.stringify($scope.myForm))
};
});
I have my code in plunker here.
How should I handle this situation?
Use the ng-change directive instead of ng-click:
<input type="checkbox" name="awesome" ng-model="formData.awesome"
ng-true-value="ofCourse" ng-false-value="iWish"
̶n̶g̶-̶c̶l̶i̶c̶k̶=̶"̶o̶n̶C̶l̶i̶c̶k̶(̶)̶"̶
ng-change="onClick()" > Are you awesome?
The ng-change directive adds a $viewChangeListener that is invoked after the user operates the control.
The ng-click directive adds a click handler that is invoked before the ngModelController updates the model.
Note: Checkboxes can be focused using the tab key and operated with the enter key as well as by clicking with the mouse.
For more information, see
这篇关于ng-单击复选框不更新表单的$ pristine属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
