ng-pristine和ng-dirty有什么区别?看起来你可以同时成为true:
ng-pristine
ng-dirty
true
$scope.myForm.$pristine = true; // after editing the form
fv2wmkja1#
ng-dirty类告诉您表单已被用户修改,而ng-pristine类告诉您表单未被用户修改,因此ng-dirty和ng-pristine是同一个故事的两个方面。这些类可以在任何字段上设置,而表单有两个属性,$dirty和$pristine。您可以使用$scope.form.$setPristine()函数将表单重置为原始状态(请注意,这是AngularJS 1.1.x的特性)。即使在AngularJS的1.0.x分支中,如果你想要一个$scope.form.$setPristine()-ish行为,你需要自己的解决方案(可以找到一些相当好的解决方案**here**),基本上,这意味着迭代所有表单字段,并将它们的$dirty标志设置为false。
$dirty
$pristine
$scope.form.$setPristine()
false
zsohkypk2#
pristine告诉我们一个字段是否还是空白,dirty告诉我们用户是否已经在相关字段中键入了任何内容:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script> <form ng-app="" name="myForm"> <input name="email" ng-model="data.email"> <div class="info" ng-show="myForm.email.$pristine"> Email is virgine. </div> <div class="error" ng-show="myForm.email.$dirty"> E-mail is dirty </div> </form>
一个已经注册了一个按键事件的字段不再是原始的(不再是原始的),因此永远是脏的。
wwtsj6pe3#
这两个指令显然服务于相同的目的,虽然看起来Angular 团队的决定,包括两个干扰干原则,并增加了页面的有效负载,同时拥有这两种元素仍然是非常实用的,因为在css文件中有.ng-pristine和.ng-dirty可用于样式化,所以样式化输入元素更加容易。我想这是添加这两个指令的主要原因。
mitkmikd4#
正如前面的答案所述,ng-pristine用于指示字段未被修改,而ng-dirty用于告知字段已被修改,为什么两者都需要?假设我们有一个表单,表单的字段中包含电话和电子邮件地址,电话或电子邮件地址都是必需的,并且当用户在每个字段中得到无效数据时,您还必须通知用户,这可以通过同时使用ng-dirty和ng-pristine来实现:
<form name="myForm"> <input name="email" ng-model="data.email" ng-required="!data.phone"> <div class="error" ng-show="myForm.email.$invalid && myForm.email.$pristine && myForm.phone.$pristine">Phone or e-mail required</div> <div class="error" ng-show="myForm.email.$invalid && myForm.email.$dirty"> E-mail is invalid </div> <input name="phone" ng-model="data.phone" ng-required="!data.email"> <div class="error" ng-show="myForm.phone.$invalid && myForm.email.$pristine && myForm.phone.$pristine">Phone or e-mail required</div> <div class="error" ng-show="myForm.phone.$invalid && myForm.phone.$dirty"> Phone is invalid </div> </form>
wixjitnu5#
ng-原始*($原始)*
如果表单/输入尚未使用(未被用户修改),则为True
ng-dirty*($脏数据)*
如果表单/输入已被使用(由用户修改),则为True
**$设置脏();**将窗体设置为脏状态。可以调用此方法添加“ng-dirty”类并将窗体设置为脏状态(ng-dirty类)。此方法将当前状态传播到父窗体。**$设置原始();**将窗体设置为其原始状态。此方法将窗体的$pristine状态设置为true,将$dirty状态设置为false,删除ng-dirty类并添加ng-pristine类。此外,它将$submitted状态设置为false。此方法还将传播到此窗体中包含的所有控件。
5条答案
按热度按时间fv2wmkja1#
ng-dirty
类告诉您表单已被用户修改,而ng-pristine
类告诉您表单未被用户修改,因此ng-dirty
和ng-pristine
是同一个故事的两个方面。这些类可以在任何字段上设置,而表单有两个属性,
$dirty
和$pristine
。您可以使用
$scope.form.$setPristine()
函数将表单重置为原始状态(请注意,这是AngularJS 1.1.x的特性)。即使在AngularJS的1.0.x分支中,如果你想要一个
$scope.form.$setPristine()
-ish行为,你需要自己的解决方案(可以找到一些相当好的解决方案**here**),基本上,这意味着迭代所有表单字段,并将它们的$dirty
标志设置为false
。zsohkypk2#
pristine告诉我们一个字段是否还是空白,dirty告诉我们用户是否已经在相关字段中键入了任何内容:
一个已经注册了一个按键事件的字段不再是原始的(不再是原始的),因此永远是脏的。
wwtsj6pe3#
这两个指令显然服务于相同的目的,虽然看起来Angular 团队的决定,包括两个干扰干原则,并增加了页面的有效负载,同时拥有这两种元素仍然是非常实用的,因为在css文件中有.ng-pristine和.ng-dirty可用于样式化,所以样式化输入元素更加容易。我想这是添加这两个指令的主要原因。
mitkmikd4#
正如前面的答案所述,
ng-pristine
用于指示字段未被修改,而ng-dirty
用于告知字段已被修改,为什么两者都需要?假设我们有一个表单,表单的字段中包含电话和电子邮件地址,电话或电子邮件地址都是必需的,并且当用户在每个字段中得到无效数据时,您还必须通知用户,这可以通过同时使用
ng-dirty
和ng-pristine
来实现:wixjitnu5#
ng-原始*($原始)*
如果表单/输入尚未使用(未被用户修改),则为True
ng-dirty*($脏数据)*
如果表单/输入已被使用(由用户修改),则为True
**$设置脏();**将窗体设置为脏状态。可以调用此方法添加“ng-dirty”类并将窗体设置为脏状态(ng-dirty类)。此方法将当前状态传播到父窗体。
**$设置原始();**将窗体设置为其原始状态。此方法将窗体的$pristine状态设置为true,将$dirty状态设置为false,删除ng-dirty类并添加ng-pristine类。此外,它将$submitted状态设置为false。此方法还将传播到此窗体中包含的所有控件。