AngularJS'de ng-saf ve ng-kirli arasındaki fark nedir?

109

Arasındaki farklar nelerdir ng-pristineve ng-dirty? Görünüşe göre ikisine birden sahip olabilirsiniz true:

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

angularjs

— sinerjik
kaynak

214

ng-dirtySınıf oysa formu, kullanıcı tarafından değiştirilmiş olduğunu söyler ng-pristinesınıf formu kullanıcı tarafından modifiye edilmemiş olduğunu söyler. Yani ng-dirtyveng-pristine aynı hikayenin iki yüzü vardır.

Formun iki özelliği varken, sınıflar herhangi bir alanda ayarlanır $dirtyve$pristine .

$scope.form.$setPristine()Bir formu bozulmamış duruma sıfırlamak için işlevi kullanabilirsiniz (lütfen bunun bir AngularJS 1.1.x özelliği olduğunu unutmayın).

$scope.form.$setPristine()AngularJS'nin 1.0.x dalında bile bir -ish davranışı istiyorsanız, kendi çözümünüzü yuvarlamanız gerekir (oldukça iyi olanlardan bazıları burada bulunabilir ). Temel olarak bu, tüm form alanlarını yinelemek ve $dirtybayraklarınıfalse .

Bu yardımcı olur umarım.

— Golo Roden
kaynak

2

Güzel cevap, ama aynı hikayenin iki yüzü ise neden 2 sınıf? Dediğim gibi, ikinizin de doğru ya da yanlış olmasına sahip olabilirsiniz.

— sinerjik

6

Doğru, ama sanırım (korkarım) bu soru yalnızca AngularJS geliştiricilerinin cevaplayabileceği bir soru. Başka bir deyişle: bilmiyorum.

— Golo Roden

2

@synergetic, ng-show ve ng-hide gibi temelde, bir tane yeterli ama görünür bir sebep olmadan iki tane var

— Labib

1

@ synergetic ng-show, anlamsal olarak daha basittir ve kavramak için! ng-hide'den daha az bilişsel adım gerektirir. beyninizin bu fazladan adımı atması gerekiyor ve bu nedenle böcekleri ortaya koyma olasılığınız daha yüksek

— Damian Green

4

Bunun niyetinize bağlı olduğunu düşünüyorum: Bazen belirli bir durumla ilgili ek şeyler göstermek istersiniz ve bazen belirli bir duruma göre bazı şeyleri gizlemeniz gerekir . Kullanım durumunuza bağlı olarak her ikisi de uygun olabilir. Tabii teknik olarak aynı olsa da, kasıtlı olarak değil.

— Golo Roden

41

bozulmamış bize bir alanın hala bakir olup olmadığını, kirli ise kullanıcının ilgili alana herhangi bir şey yazıp yazmadığını söyler:

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

Snippet'i genişlet

Tek bir tuş atma olayını kaydeden bir alan artık bakir değildir (artık bozulmamış değildir) ve bu nedenle sonsuza dek kirlenmiştir.

— Meziane
kaynak

Fareyle yapıştırmaya ne dersiniz?

— Mihai Răducanu

2

Bu hiçbir şeyi açıklamıyor. Soru 'fark nedir' idi. Bakire derken neyi kastettiğin ve kirli derken neyi kastettiğin hakkında hiçbir açıklama yok.

— hogan

34

Her iki yönerge de açıkça aynı amaca hizmet ediyor ve açısal ekibin hem DRY ilkesine müdahale etme hem de sayfanın yükünü artırma kararı gibi görünse de, ikisinin de etrafta olması oldukça pratik. Css dosyalarınızda stil için hem .ng-bozulmamış hem de .ng-dirty mevcut olduğundan, giriş öğelerinizi biçimlendirmek daha kolaydır. Sanırım her iki yönergeyi de eklemenin birincil nedeni buydu.

— zszep
kaynak

19

Aslında 1 .ng-pristineve .ng-dirtyfarklı css stil izin - Bu repitition arkasında en doğru neden gibi gelmiyor

— Steve Lorimer

10

Daha önceki cevaplarda ng-pristinebelirtildiği gibi, alanın değiştirilmediğini belirtmek içindir, ancak değiştirildiğini ng-dirtybelirtmek içindir. Neden ikisine de ihtiyacın var?

Diyelim ki alanlar arasında telefon ve e-posta adresi olan bir formumuz var. Telefon ya da e-posta gereklidir ve ayrıca her alanda geçersiz veri olduğunda kullanıcıyı bilgilendirmeniz gerekir. Bu, ng-dirtyve ng-pristinebirlikte kullanılarak gerçekleştirilebilir :

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

1

ng-bozulmamış (bozulmamış $)

Boolean True form / giriş henüz kullanılmadıysa ( kullanıcı tarafından değiştirilmediyse) )

ng-kirli (kirli $)

Form / girdi kullanılmışsa Boolean True ( kullanıcı tarafından değiştirilmişse )

$ setDirty () öğesini; Formu kirli bir duruma ayarlar. Bu yöntem, 'ng-dirty' sınıfını eklemek ve formu kirli bir duruma (ng-kirli sınıf) ayarlamak için çağrılabilir. Bu yöntem, mevcut durumu üst formlara yayacaktır.

$ setPristine (); Formu bozulmamış durumuna ayarlar. Bu yöntem, formun $ bozulmamış durumunu true, $ dirty durumunu false olarak ayarlar, ng-dirty sınıfını kaldırır ve ng-pristine sınıfını ekler. Ek olarak, $ submit durumunu false olarak ayarlar. Bu yöntem ayrıca bu formda bulunan tüm kontrollere de uygulanacaktır.

Bir formu eski haline döndürmek, bir formu kaydettikten veya sıfırladıktan sonra 'yeniden kullanmak' istediğimizde genellikle yararlıdır.

— Dhyan Mohandas
kaynak