在AngularJS中的$pristine和$dirty之间切换

在AngularJS中，$pristine和$dirty是表单控件的两个状态属性，它们用于跟踪用户是否已经与表单控件进行了交互。

基础概念

$pristine：当表单控件首次加载并且用户尚未与之交互时，该属性为true。这意味着表单控件的值与其初始值相同，没有被修改过。
$dirty：一旦用户开始与表单控件交互并改变了其值，该属性变为true。这表明表单控件的当前值与初始值不同。

优势

状态管理：这两个属性帮助开发者轻松地了解表单的状态，从而可以基于这些状态执行不同的逻辑，比如显示验证消息或启用/禁用提交按钮。
用户体验：通过实时反馈用户的输入状态，可以提高用户体验，使用户清楚地知道哪些字段已经被填写。

类型

这两个属性都是布尔类型的，它们的值只能是true或false。

应用场景

表单验证：根据表单控件是否为$dirty状态来决定是否显示错误消息。
提交按钮控制：通常只有在表单至少有一个控件变为$dirty时，才启用提交按钮。

示例代码

以下是一个简单的AngularJS表单示例，展示了如何使用$pristine和$dirty：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>AngularJS Form Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="FormController">
    <form name="myForm">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" ng-model="user.name" required>
        <span ng-show="myForm.name.$dirty && myForm.name.$invalid">Name is required.</span><br>

        <button ng-disabled="myForm.$pristine">Submit</button>
    </form>

    <script>
        var app = angular.module('myApp', []);
        app.controller('FormController', ['$scope', function($scope) {
            $scope.user = { name: '' };
        }]);
    </script>
</body>
</html>

在这个例子中，当用户开始输入名字时，$dirty状态变为true，并且如果名字字段为空，则会显示错误消息。提交按钮初始是禁用的，只有当表单不再是$pristine状态时才会启用。