Câu trả lời:
Các ng-dirtylớp học sẽ cho bạn biết rằng hình thức đã được sửa đổi bởi người sử dụng, trong khi đó ng-pristinelớp sẽ cho bạn biết rằng hình thức chưa được sửa đổi bởi người sử dụng. Vì vậy ng-dirtyvà ng-pristinelà hai mặt của cùng một câu chuyện.
Các lớp được đặt trên bất kỳ trường nào, trong khi biểu mẫu có hai thuộc tính $dirtyvà $pristine.
Bạn có thể sử dụng $scope.form.$setPristine()chức năng để đặt lại biểu mẫu về trạng thái nguyên sơ (xin lưu ý rằng đây là tính năng AngularJS 1.1.x).
Nếu bạn muốn có $scope.form.$setPristine()hành vi -ish ngay cả trong nhánh 1.0.x của AngularJS, bạn cần phải đưa ra giải pháp của riêng mình (một số giải pháp khá tốt có thể được tìm thấy tại đây ). Về cơ bản, điều này có nghĩa là lặp lại tất cả các trường biểu mẫu và đặt $dirtycờ của chúng thành false.
Hi vọng điêu nay co ich.
nguyên sơ cho chúng tôi biết nếu một trường vẫn còn nguyên và cho chúng tôi biết nếu người dùng đã nhập bất kỳ thứ gì vào trường liên quan:
<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>Một trường đã đăng ký một sự kiện keydown duy nhất sẽ không còn trinh nguyên (không còn nguyên sơ) và do đó sẽ bị bẩn vĩnh viễn.
Cả hai chỉ thị rõ ràng đều phục vụ cùng một mục đích và mặc dù có vẻ như quyết định của nhóm góc cạnh bao gồm cả hai hướng dẫn này can thiệp vào nguyên tắc DRY và thêm vào tải trọng của trang, nhưng vẫn thực tế hơn nếu có cả hai hướng dẫn này. Việc tạo kiểu cho các phần tử đầu vào của bạn dễ dàng hơn vì bạn có cả .ng-virgin và .ng-dirty để tạo kiểu trong các tệp css của mình. Tôi đoán đây là lý do chính để thêm cả hai chỉ thị.
.ng-pristinevà .ng-dirtycho phép phong cách css khác nhau - điều này dường như lý do đúng nhất đằng sau sự tái diễn
Như đã nêu trong các câu trả lời trước đó, ng-pristinelà để chỉ ra rằng trường chưa được sửa đổi, trong khi đó ng-dirtylà để cho biết nó đã được sửa đổi. Tại sao cần cả hai?
Giả sử chúng ta có một biểu mẫu với địa chỉ điện thoại và e-mail trong số các trường. Điện thoại hoặc e-mail là bắt buộc và bạn cũng phải thông báo cho người dùng khi họ có dữ liệu không hợp lệ trong mỗi trường. Điều này có thể được thực hiện bằng cách sử dụng ng-dirtyvà ng-pristinekết hợp:
<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-nguyên sơ ($ nguyên sơ)
Boolean True nếu biểu mẫu / đầu vào chưa được sử dụng ( chưa được sửa đổi bởi người dùng )
ng-dơ ($ dơ bẩn)
Boolean Đúng nếu biểu mẫu / đầu vào đã được sử dụng ( người dùng sửa đổi )
$ setDirty (); Đặt biểu mẫu thành trạng thái bẩn. Phương thức này có thể được gọi để thêm lớp 'ng-dirty' và đặt biểu mẫu thành trạng thái bẩn (lớp ng-dirty). Phương thức này sẽ truyền trạng thái hiện tại đến các biểu mẫu mẹ.
$ setPristine (); Đặt biểu mẫu về trạng thái nguyên sơ. Phương thức này đặt trạng thái $ nguyên sơ của biểu mẫu thành true, trạng thái $ dirty thành false, loại bỏ lớp ng-dirty và thêm lớp ng-virgin. Ngoài ra, nó đặt trạng thái $ đã gửi thành false. Phương thức này cũng sẽ phổ biến cho tất cả các điều khiển có trong biểu mẫu này.
Đặt biểu mẫu trở lại trạng thái nguyên sơ thường hữu ích khi chúng ta muốn 'sử dụng lại' biểu mẫu sau khi lưu hoặc đặt lại nó.