AngularJS中的ng-pristine和ng-dirty有什么区别？

在AngularJS中，表单元素可以使用ng-model指令与控制器中的属性进行绑定。同时，AngularJS还提供了一些指令来帮助我们检查表单元素的状态，其中包括ng-pristine和ng-dirty。

ng-pristine和ng-dirty是什么？

ng-pristine和ng-dirty是AngularJS中用于表单元素状态检查的指令。

• ng-pristine表示表单元素未被修改过，即其初始状态
• ng-dirty表示表单元素已被修改过，即其状态已经改变

这两个指令要与ng-model指令一起使用，才能有效地检查表单元素的状态。

检查表单元素的状态

我们可以使用ng-class指令来检查表单元素的状态，并在页面上设置相应的样式。

<input type="text" ng-model="name" ng-class="{ 'ng-pristine': userForm.name.$pristine, 'ng-dirty': userForm.name.$dirty }">

在这个例子里，我们对文本输入框应用了ng-class指令，并且设置了两个条件：

• 当文本输入框的状态为ng-pristine时，应用ng-pristine样式
• 当文本输入框的状态为ng-dirty时，应用ng-dirty样式

注意，这里的userForm.name.$pristine和userForm.name.$dirty是AngularJS自动生成的验证器，用于检查表单元素的状态。

总结

ng-pristine和ng-dirty是AngularJS中用于表单元素状态检查的指令，可以帮助我们检查表单元素是否被修改过。使用ng-class指令可以根据表单元素的状态设置相应的样式。这些指令可以帮助我们更好地控制表单元素的状态，并为用户提供更好的交互体验。