gpt4 book ai didi

javascript - ng-click 复选框不更新表单的 $pristine 属性

转载 作者:行者123 更新时间:2023-11-29 10:26:48 25 4
gpt4 key购买 nike

AngularJS 第一次更新隐藏文本时,表单的$pristine 属性没有更新

我在 AngularJS 中有一个表单,我想知道表单的任何字段是否已更新。

更新复选框时,相应的 $pristine 属性不会更新。

所以我添加了一个隐藏的文本框,它绑定(bind)到复选框的相同 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))
};
});

我的代码在 plunker here 中.

我应该如何处理这种情况?

最佳答案

使用 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 指令添加了一个点击处理程序,该处理程序在 ngModelController 之前调用。更新模型。

注意:复选框可以使用 tab 键聚焦,使用 enter 键以及点击鼠标进行操作。

有关详细信息,请参阅

关于javascript - ng-click 复选框不更新表单的 $pristine 属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56976481/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com