AngularJS में, एनजी-प्रीस्टाइन और एनजी-गंदे के बीच अंतर क्या है?

Question

क्या अंतर हैं ng-pristineऔर ng-dirty? ऐसा लगता है कि आप दोनों हो सकते हैं true:

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

Answer 1

ng-dirtyवर्ग आपको बताता है कि फार्म, उपयोगकर्ता द्वारा संशोधित किया गया है, जबकि ng-pristineवर्ग आपको बताता है कि प्रपत्र उपयोगकर्ता द्वारा संशोधित नहीं किया गया है। तो ng-dirtyऔर ng-pristineएक ही कहानी के दो पहलू हैं।

कक्षाएं किसी भी क्षेत्र पर सेट की जाती हैं, जबकि फॉर्म में दो गुण होते हैं, $dirtyऔर $pristine।

आप $scope.form.$setPristine()फ़ंक्शन का उपयोग प्राचीन राज्य में फ़ॉर्म को रीसेट करने के लिए कर सकते हैं (कृपया ध्यान दें कि यह एक AngularJS 1.1.x सुविधा है)।

यदि आप $scope.form.$setPristine()AngularJS की 1.0.x शाखा में भी -ish व्यवहार चाहते हैं , तो आपको अपने स्वयं के समाधान को रोल करने की आवश्यकता है (कुछ सुंदर अच्छे यहां मिल सकते हैं )। मूल रूप से, इसका मतलब है सभी प्रकार के क्षेत्रों पर पुनरावृत्ति करना और अपना $dirtyझंडा लगाना false।

उम्मीद है की यह मदद करेगा।

Comments

अच्छा जवाब, लेकिन 2 कक्षाएं क्यों, अगर वे एक ही कहानी के दो पहलू हैं? जैसा कि मैंने कहा, आप दोनों सच्चे या झूठे हो सकते हैं।

— synergetic

यह सही है, लेकिन मुझे लगता है (डर) कि यह एक सवाल है जिसका जवाब केवल AngularJS देवता दे सकते हैं। दूसरे शब्दों में: मुझे नहीं पता।

— गोलो रॉडेन

@ ऑस्जेनर्जिक यह एनजी-शो और एनजी-छिपाने की तरह है, मूल रूप से एक पर्याप्त है, लेकिन हमारे पास दृश्यमान कारणों के लिए दो हैं

— लबीब इस्माइल

@synergetic एनजी-शो समझने के लिए शब्दार्थ से अधिक सरल है, और एनजी-छिपाने की तुलना में एक कम संज्ञानात्मक कदम की आवश्यकता होती है! आपके मस्तिष्क को उस अतिरिक्त कदम को करने की आवश्यकता है और इस प्रकार आपको बग्स की शुरुआत करने की संभावना है

— डेमियन ग्रीन

मुझे लगता है कि यह आपके इरादे पर निर्भर करता है: कभी-कभी, आप एक विशिष्ट स्थिति को देखते हुए अतिरिक्त चीजों को दिखाना चाहते हैं , और कभी-कभी आपको एक विशिष्ट स्थिति को देखते हुए कुछ चीजों को छिपाने की आवश्यकता होती है। आपके उपयोग के मामले के आधार पर, दोनों उपयुक्त हो सकते हैं। बेशक, जबकि यह तकनीकी रूप से बहुत ही समान है, जानबूझकर यह नहीं है।

— गोलो रॉडेन

Answer 2

अगर कोई फ़ील्ड अभी भी कुंवारी है, तो गंदा हमें बताता है और अगर उपयोगकर्ता पहले से संबंधित क्षेत्र में कुछ भी टाइप करता है, तो गंदा हमें बताता है:

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

एक ऐसा क्षेत्र जिसने एक एकल कीडाउन घटना को फिर से प्राप्त किया है, वह कोई कुंवारी (कोई और अधिक प्राचीन) नहीं है और इसलिए हमेशा के लिए गंदा है।

Comments

कैसे माउस के साथ चिपकाने के बारे में?

— Mihai Răducanu

यह कुछ भी स्पष्ट नहीं करता है। सवाल था is क्या अंतर है ’। कुंवारी से आपका क्या मतलब है और गंदे से क्या मतलब है इसका कोई स्पष्टीकरण नहीं है।

— होगन

Answer 3

दोनों निर्देश स्पष्ट रूप से एक ही उद्देश्य की सेवा करते हैं, और हालांकि ऐसा लगता है कि दोनों को शामिल करने के लिए कोणीय टीम के निर्णय में DRY सिद्धांत के साथ हस्तक्षेप होता है और पृष्ठ के पेलोड में जुड़ जाता है, फिर भी उन दोनों के पास होना व्यावहारिक है। आपके इनपुट तत्वों को स्टाइल करना आसान है क्योंकि आपके पास दोनों .ng-pristine और .ng- गंदे आपके css फ़ाइलों में स्टाइल के लिए उपलब्ध हैं। मुझे लगता है कि यह दोनों निर्देशों को जोड़ने का प्राथमिक कारण था।

Comments

तथ्य के लिए +1 .ng-pristineऔर .ng-dirtyअलग सीएसएस स्टाइल की अनुमति दें - यह पुनरावृत्ति के पीछे सबसे सही कारण लगता है

— स्टीव लॉरिमर

Answer 4

जैसा कि पहले ही उत्तर में कहा गया है, ng-pristineयह इंगित करने के लिए है कि फ़ील्ड को संशोधित नहीं किया गया है, जबकिng-dirty यह बताने के लिए कि इसे संशोधित किया गया है। दोनों की आवश्यकता क्यों है?

मान लें कि हमें खेतों के बीच फोन और ई-मेल पते के साथ एक फॉर्म मिला है। या तो फोन या ई-मेल की आवश्यकता है, और आपको प्रत्येक क्षेत्र में अमान्य डेटा प्राप्त होने पर उपयोगकर्ता को सूचित करना होगा। इसका उपयोग करके ng-dirtyऔर ng-pristineएक साथ पूरा किया जा सकता है :

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

Answer 5

एनजी-प्राचीन ($ प्राचीन)

बूलियन सच है अगर फॉर्म / इनपुट अभी तक उपयोग नहीं किया गया है ( उपयोगकर्ता द्वारा संशोधित नहीं किया गया है )

गैर-गंदा ($ गंदा)

बूलियन सच है अगर फॉर्म / इनपुट का उपयोग किया गया है ( उपयोगकर्ता द्वारा संशोधित )

---

$ SetDirty (); प्रपत्र को गंदे अवस्था में सेट करता है। इस पद्धति को 'एनजी-डर्टी' वर्ग को जोड़ने और एक गंदे राज्य (एनजी-डर्टी क्लास) के रूप में सेट करने के लिए कहा जा सकता है। यह विधि वर्तमान स्थिति को मूल रूपों में प्रचारित करेगी।

$ SetPristine (); प्रपत्र को अपनी प्राचीन अवस्था में सेट करता है। यह विधि प्रपत्र की $ प्राचीन अवस्था को सत्य, $ को गंदे अवस्था को असत्य, गंदे-गंदे वर्ग को हटाती है और एनजी-प्रिस्टाइन वर्ग को जोड़ देती है। इसके अतिरिक्त, यह $ सबमिट की गई अवस्था को झूठी पर सेट करता है। यह विधि इस रूप में निहित सभी नियंत्रणों को भी प्रचारित करेगी।

जब हम इसे सहेजने या रीसेट करने के बाद किसी प्रपत्र का पुन: उपयोग करना चाहते हैं, तो किसी प्रपत्र को वापस प्राचीन अवस्था में सेट करना उपयोगी होता है।