In AngularJS, qual è la differenza tra ng-pristine e ng-dirty?

109

Quali sono le differenze tra ng-pristinee ng-dirty? Sembra che tu possa avere entrambi per essere true:

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

angularjs

— sinergetico
fonte

214

La ng-dirtyclasse ti dice che il form è stato modificato dall'utente, mentre la ng-pristineclasse ti dice che il form non è stato modificato dall'utente. Quindi ng-dirtye ng-pristinesono due lati della stessa storia.

Le classi sono impostate su qualsiasi campo, mentre il form ha due proprietà $dirtye $pristine.

È possibile utilizzare la $scope.form.$setPristine()funzione per ripristinare un modulo allo stato originario (si noti che questa è una funzionalità di AngularJS 1.1.x).

Se vuoi un $scope.form.$setPristine()comportamento -ish anche nel ramo 1.0.x di AngularJS, devi lanciare la tua soluzione (alcune abbastanza buone possono essere trovate qui ). Fondamentalmente, questo significa iterare su tutti i campi del modulo e impostare il loro $dirtyflag su false.

Spero che questo ti aiuti.

— Golo Roden
fonte

2

Buona risposta, ma perché 2 classi, se sono due facce della stessa storia? Come ho detto, puoi fare in modo che sia vero o falso.

— sinergico

6

Esatto, ma immagino (temo) che questa sia una domanda a cui solo gli sviluppatori di AngularJS possono rispondere. In altre parole: non lo so.

— Golo Roden

2

@synergetic è come ng-show e ng-hide fondamentalmente, uno è sufficiente ma ne abbiamo due senza una ragione visibile

— Labib Ismaiel

1

@synergetic ng-show è semanticamente più semplice da capire e richiede un passo cognitivo in meno per la comprensione rispetto a! ng-hide. il tuo cervello ha bisogno di fare quel passo in più e quindi è più probabile che tu introduca insetti

— Damian Green

4

Penso che dipenda dal tuo intento: a volte, vuoi mostrare cose aggiuntive in una situazione specifica, ea volte devi nascondere alcune cose in una situazione specifica. A seconda del caso d'uso, entrambi potrebbero essere appropriati. Ovviamente, anche se tecnicamente è la stessa cosa, intenzionalmente non lo è.

— Golo Roden

41

pristine ci dice se un campo è ancora vergine e sporco ci dice se l'utente ha già digitato qualcosa nel campo correlato:

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

Espandi lo snippet

Un campo che ha registrato un singolo evento di keydown non è più vergine (non più incontaminato) ed è quindi sporco per sempre.

— Meziane
fonte

Che ne dici di incollare con il mouse?

— Mihai Răducanu

2

Questo non spiega nulla. La domanda era "qual è la differenza". Non c'è alcuna spiegazione di cosa intendi per vergine e cosa intendi per sporco.

— hogan

34

Entrambe le direttive ovviamente servono allo stesso scopo, e sebbene sembri che la decisione del team angular di includerle entrambe interferisca con il principio DRY e si aggiunga al carico utile della pagina, è comunque piuttosto pratico averle entrambe in giro. È più facile definire lo stile degli elementi di input poiché sono disponibili sia .ng-pristine che .ng-dirty per lo stile nei file css. Immagino che questo sia stato il motivo principale per l'aggiunta di entrambe le direttive.

— zszep
fonte

19

+1 per il fatto .ng-pristinee .ng-dirtyconsentire uno stile CSS diverso - questo sembra il motivo più corretto dietro la ripetizione

— Steve Lorimer

10

Come già affermato nelle risposte precedenti, ng-pristineserve per indicare che il campo non è stato modificato, mentre ng-dirtyper indicare che è stato modificato. Perché servono entrambi?

Diciamo che abbiamo un modulo con il telefono e l'indirizzo e-mail tra i campi. È richiesto il telefono o l'e-mail e devi anche avvisare l'utente quando ha dati non validi in ogni campo. Ciò può essere ottenuto utilizzando ng-dirtye ng-pristineinsieme:

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

— sandst1
fonte

1

ng-pristine ($ pristine)

Boolean True se il modulo / input non è stato ancora utilizzato ( non modificato dall'utente )

ng-sporco ($ sporco)

Boolean True se il modulo / input è stato utilizzato ( modificato dall'utente )

$ setDirty (); Imposta il modulo su uno stato sporco. Questo metodo può essere chiamato per aggiungere la classe "ng-dirty" e impostare il form in uno stato sporco (classe ng-dirty). Questo metodo propagherà lo stato corrente ai moduli padre.

$ setPristine (); Imposta il modulo sul suo stato originario. Questo metodo imposta lo stato $ pristine del form su true, lo stato $ dirty su false, rimuove la classe ng-dirty e aggiunge la classe ng-pristine. Inoltre, imposta lo stato $ submit su false. Questo metodo si propagherà anche a tutti i controlli contenuti in questo modulo.

L'impostazione di un modulo in uno stato originale è spesso utile quando si desidera "riutilizzare" un modulo dopo averlo salvato o ripristinato.

— Dhyan Mohandas
fonte