在AngularJS中,ng-pristine和ng-dirty有什么区别?

ng-pristineng-dirty什么区别? 看来你们可以有两个是true

 $scope.myForm.$pristine = true; // after editing the form 

ng-dirty类告诉你表单已被用户修改,而ng-pristine类告诉你表单没有被用户修改。 因此ng-dirtyng-pristine是同一故事的两面。

这些类是在任何字段上设置的,而表单有两个属性$dirty$pristine

您可以使用$scope.form.$setPristine()函数将表单重置为pristine状态(请注意,这是一个AngularJS 1.1.xfunction)。

如果你想要一个$scope.form.$setPristine() ish的行为,即使在AngularJS的1.0.x版本中,你也需要推出你自己的解决scheme(在这里可以find一些相当不错的解决scheme)。 基本上,这意味着迭代所有的表单字段,并将其$dirty标志设置为false

希望这可以帮助。

原始的告诉我们,如果一个领域仍然是处女,并且肮脏告诉我们,如果用户已经在相关领域input了任何东西:

 <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> 

这两个指令显然都是为了达到同样的目的,虽然看起来angular色团队的决定既包括干涉DRY原则,也增加了页面的有效载荷,但是将它们放在一起还是相当实际的。 您的input元素的样式更容易,因为您的.ng-pristine和.ng-dirty可用于您的css文件中的样式。 我想这是添加两个指令的主要原因。

正如在前面的答案中所述, ng-pristine用于指示该字段未被修改,而ng-dirty用于指示它已被修改。 为什么需要两个?

比方说,我们已经有一个电话和电子邮件地址之间的表格。 无论是电话还是电子邮件都是必需的,而且在每个字段中都有无效数据时,您也必须通知用户。 这可以通过一起使用ng-dirtyng-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> 

ng-pristine ($ pristine)

Boolean如果表单/input尚未使用( 用户未修改),则为True

ng-dirty ($ dirty)

Boolean如果表单/input已被使用( 由用户修改),则为True


$使用setDirty(); 将表单设置为脏状态。 可以调用此方法来添加“ng-dirty”类并将表单设置为脏状态(ng-dirty类)。 此方法将传播当前状态到父窗体。

$ setPristine(); 将表单设置为其原始状态。 此方法将表单的$ pristine状态设置为true,将$ dirty状态设置为false,删除ng-dirty类并添加ng-pristine类。 另外,它将$提交状态设置为false。 这个方法也会传播到这个表单中的所有控件。

当我们希望在保存或重置表单后重新使用表单时,将表单设置回原始状态通常很有用。