Angularjs 为什么角JS的形式。$pristine不随直接JS操作而改变
我想通过测试Angular JS pristine设置来调整表单项的显示,例如按钮的enabled/disabled属性 当单击事件触发时,表单的原始值会如我所期望的那样发生更改,但当我直接操作scope变量时,表单的原始设置不会更改,即使表单上的控件已绑定到该变量 请参阅以下JSFIDLE: 我认为,当控件绑定到范围变量时,布尔值的更改将导致forms pristine设置的更改。有没有更好的方法来测试这一点?当表单上没有任何更改时,是否有更好的方法来调整按钮或其他DOM元素?提前感谢您的指点。下面是JSFIDLE不工作时的代码Angularjs 为什么角JS的形式。$pristine不随直接JS操作而改变,angularjs,Angularjs,我想通过测试Angular JS pristine设置来调整表单项的显示,例如按钮的enabled/disabled属性 当单击事件触发时,表单的原始值会如我所期望的那样发生更改,但当我直接操作scope变量时,表单的原始设置不会更改,即使表单上的控件已绑定到该变量 请参阅以下JSFIDLE: 我认为,当控件绑定到范围变量时,布尔值的更改将导致forms pristine设置的更改。有没有更好的方法来测试这一点?当表单上没有任何更改时,是否有更好的方法来调整按钮或其他DOM元素?提前感谢您的指
<div ng-app ng-controller="MyCtrl">
<form novalidate name="myForm">
{{myBool}}
<input type="checkbox" ng-model="myBool" />
<button ng-click="myBool=!myBool">JS set</button>
<div>Form Pristine:{{myForm.$pristine}}</div>
</form>
</div>
<script>
function MyCtrl($scope){
$scope.myBool = false;
}
</script>
{{myBool}}
JS集
原始形式:{{myForm.$Pristine}}
函数MyCtrl($scope){
$scope.myBool=false;
}
只有在使用ngModelControllers$setViewValue()
方法时,具有ng model
指令的输入的$pristine
属性才会更改,即通过用户对输入元素的交互或自己调用该方法
这是因为原始状态用于跟踪您是否更改(修改了表单中任何ng model
启用的输入元素)。这并不意味着输入中的值等于模型中的值,它们总是在每次击键后更新!
没有自动将表单重置为pristine的方法,您必须通过调用form.$setPristine()
来决定何时执行此操作
如果要重置示例中的原始信息,必须通过将按钮绑定到作用域上的函数来通知窗体重置自身:
$scope.toggleBool = function() {
$scope.myBool = !$scope.myBool;
$scope.myForm.$setPristine();
}
如果要为窗体和对象的原始状态分别设置一组值,则必须克隆对象,然后在窗体中使用克隆。否则,所有更改始终会立即更改原始对象
然后,您可以通过在原始对象与其克隆对象之间执行深度比较来确定表单的状态
2015年5月更新:这个答案来自2013年。ngModelController在Angular的最新版本(目前为1.4)中获得了一个新版本,它提供了一些管理表单状态的机制。在1.0.4中也有体现。对不起,$setViewValue()的代码片段是什么?@EliseChant抱歉,我不理解您的问题。你能详细解释一下吗?@Jan抱歉,与重置没有直接关系pristine@Jan,请添加一个示例fiddle应用程序$scope.myForm.$setDirty();可能是OP想要的(我也是),你的想法解决了我的问题,+1。