एनजी-अगर और एनजी-शो / एनजी-छिपाने के बीच अंतर क्या है

Question

मैं ng-ifऔर ng-show/ के बीच के अंतर को समझने की कोशिश कर रहा हूं ng-hide, लेकिन वे मुझे एक जैसे लगते हैं।

क्या कोई अंतर है जो मुझे एक या दूसरे का उपयोग करने के लिए ध्यान में रखना चाहिए?

Answer 1

ngIf

ngIfनिर्देश निकाल देता है या पुन डोम एक अभिव्यक्ति के आधार पर पेड़ के एक हिस्से को। यदि ngIfकिसी गलत मान का मूल्यांकन करने के लिए असाइन किया गया अभिव्यक्ति है, तो तत्व को DOM से हटा दिया जाता है, अन्यथा तत्व का क्लोन DOM में फिर से दर्ज किया जाता है।

<!-- when $scope.myValue is truthy (element is restored) -->
<div ng-if="1"></div>

<!-- when $scope.myValue is falsy (element is removed) -->
<div ng-if="0"></div>

जब किसी तत्व को हटा दिया जाता है तो ngIfउसके दायरे को नष्ट कर दिया जाता है और तत्व के बहाल होने पर एक नया दायरा बनाया जाता है। ngIfप्रोटोटाइप मूल विरासत का उपयोग कर अपने मूल दायरे से विरासत में बनाया गया दायरा।

यदि पेरेंट स्कोप में परिभाषित जावास्क्रिप्ट प्रिमिटिव को बांधने के लिए ngModelउपयोग किया जाता है ngIf, तो चाइल्ड स्कोप के भीतर वैरिएबल में किए गए किसी भी संशोधन का पेरेंट स्कोप में वैल्यू पर कोई असर नहीं पड़ेगा, जैसे

<input type="text" ng-model="data">
<div ng-if="true">
    <input type="text" ng-model="data">
</div>        

इस स्थिति के आसपास जाने के लिए और बच्चे के दायरे के अंदर से माता-पिता के दायरे में मॉडल को अपडेट करने के लिए, एक ऑब्जेक्ट का उपयोग करें:

<input type="text" ng-model="data.input">
<div ng-if="true">
    <input type="text" ng-model="data.input">
</div>

या, $parentपैरेंट स्कोप ऑब्जेक्ट रेफर करने के लिए वेरिएबल:

<input type="text" ng-model="data">
<div ng-if="true">
    <input type="text" ng-model="$parent.data">
</div>

ngShow

ngShowनिर्देश शो या खाल दिया गया HTML तत्व के लिए प्रदान की अभिव्यक्ति के आधार पर ngShowविशेषता। तत्व ng-hideपर सीएसएस वर्ग को हटाने या जोड़कर तत्व को दिखाया या छिपाया गया है । .ng-hideCSS वर्ग AngularJS में पूर्वनिर्धारित और किसी से प्रदर्शन शैली सेट (एक उपयोग कर रहा है !importantझंडा)।

<!-- when $scope.myValue is truthy (element is visible) -->
<div ng-show="1"></div>

<!-- when $scope.myValue is falsy (element is hidden) -->
<div ng-show="0" class="ng-hide"></div>

जब ngShowअभिव्यक्ति का मूल्यांकन होता है, falseतो ng-hideसीएसएस वर्ग को classतत्व पर विशेषता में जोड़ा जाता है, जिससे यह छिपा हो जाता है। जब true, ng-hideCSS वर्ग को तत्व से हटा दिया जाता है जिससे तत्व छिपा हुआ नहीं दिखाई देता है।

Comments

संकेत: ng-ifमॉडल के साथ HTML तत्व को हटाकर , जोड़ा गया ng-model, अब मौजूद नहीं है।

— mrzmyr

@CodeHater मैंने सफलतापूर्वक एनजी-लीवर पर ली है अगर एक पृष्ठ पर एनजी-शो / एनजी-छिपाने पर अन्यथा एक बड़ा डोम होता। ऐसा लगता है कि यह पृष्ठ जल्दी महसूस करने के लिए है, लेकिन किसी भी तरह से वैज्ञानिक विश्लेषण नहीं है।

— एड स्पेंसर

पूरी तरह से समझने में मुझे जो परेशानी हो रही है वह यह है कि जब आप जिस मॉडल में data.inputकाम करते हैं उसमें कोई वस्तु कैसे / क्यों है ... लेकिन dataअकेले मॉडल काम नहीं करता है। @ कोडहेटर

— मार्क पाइज़्ज़ाक - ट्रिलोन।

@mcpDESIGNS ngIfएक नया स्कोप बनाता है, इसलिए नेस्टेड के ऊपर के उदाहरण को देखने से ngModelएक नया dataमॉडल बन जाएगा, हालांकि एक ही नाम वाला मॉडल पेरेंट स्कोप में मौजूद है। लेकिन जब आप एक डॉट नोटेशन का उपयोग करते हैं, तो आप JS को स्कोप की प्रोटोटाइप श्रृंखला बनाते हैं। इसलिए यदि इसे वर्तमान दायरे में मान नहीं मिलता है, तो यह मूल क्षेत्र में और इसके लिए देखने की कोशिश करेगा। कुछ अन्य निर्देश जो एक अलग गुंजाइश बनाते हैं ngInclude, हैं ngRepeat। आशा है कि अब यह स्पष्ट है। :)

— ऑलवेज़रर

प्रदर्शन के लिए कौन सा बेहतर है? मुझे लगता है कि एनजी-शो और एनजी-छिपाने यह नहीं है?

— tom10271

Answer 2

शायद बनाने के लिए एक दिलचस्प बिंदु, दोनों के बीच प्राथमिकताओं के बीच अंतर है।

जहाँ तक मैं बता सकता हूँ, एनजी-अगर निर्देश में सभी कोणीय निर्देशों में सर्वोच्च (यदि उच्चतम नहीं है) प्राथमिकता है। जिसका अर्थ है: यह एफआईआरएसटी को अन्य सभी से पहले चलाएगा, कम प्राथमिकता वाले, निर्देश। तथ्य यह है कि यह FIRST चलाता है, का अर्थ है कि प्रभावी ढंग से, किसी भी आंतरिक निर्देशों को संसाधित करने से पहले तत्व को हटा दिया जाता है। या कम से कम: यह वही है जो मैं इसे बनाता हूं।

मैंने पर्यवेक्षक के रूप में यूआई में उपयोग किया है और मैं अपने वर्तमान ग्राहक के लिए निर्माण कर रहा हूं। पूरा यूआई काफी भारी है, और इसमें एनजी-शो और एनजी-हाईड है। बहुत अधिक विस्तार में नहीं जाने के लिए, लेकिन मैंने एक जेनेरिक घटक बनाया, जिसे JSON कॉन्फिगरेशन का उपयोग करके प्रबंधित किया जा सकता है, इसलिए मुझे टेम्पलेट के अंदर कुछ स्विचिंग करनी थी। एक एनजी-रिपीट प्रेजेंट होता है, और एनजी-रिपीट के अंदर, एक टेबल दिखाया जाता है, जिसमें बहुत सारे एनजी-शो, एनजी-हाइड और यहां तक ​​कि एनजी-स्विच मौजूद होते हैं। वे सूची में कम से कम 50 रिपीट दिखाना चाहते थे, जिसके परिणामस्वरूप कम से कम 1500-2000 निर्देशों को हल किया जाएगा। मैंने कोड की जाँच की, और सामने की तरफ जावा बैकएंड + कस्टम JS डेटा को संसाधित करने में लगभग 150ms का समय लेगा, और फिर कोणीय प्रदर्शित होने से पहले इस पर कुछ 2-3 सेकंड चबाएगा। ग्राहक ने कोई शिकायत नहीं की, लेकिन मुझे खुशी हुई :-)

अपनी खोज में, मैं एनजी-अगर निर्देश के पार ठोकर खाई। अब, शायद यह इंगित करना सबसे अच्छा है कि इस UI को गर्भ धारण करने के बिंदु पर, कोई एनजी-आईएफ उपलब्ध नहीं था। क्योंकि एनजी-शो और एनजी-छिपाने में उनके कार्य थे, जो बूलियनों को वापस कर देते थे, मैं आसानी से उन सभी को एनजी-इफ के साथ बदल सकता था। ऐसा करने से, सभी आंतरिक निर्देशों का अब मूल्यांकन नहीं किया गया था। इसका मतलब है कि मैंने मूल्यांकन किए जा रहे सभी निर्देशों के लगभग एक तिहाई को वापस छोड़ दिया, और इस तरह, यूआई ने लगभग 500ms - 1 सेकंड लोडिंग समय तक गति दी। (मेरे पास सटीक सेकंड निर्धारित करने का कोई तरीका नहीं है)

ध्यान दें: तथ्य यह है कि निर्देशों का मूल्यांकन नहीं किया जाता है, जो नीचे हो रहा है के बारे में एक शिक्षित अनुमान है।

इसलिए, मेरी राय में: यदि आपको पृष्ठ पर उपस्थित होने के लिए तत्व की आवश्यकता है (यानी: तत्व की जांच के लिए, या जो भी हो), लेकिन बस छिपे रहें, एनजी-शो / एनजी-छिपाने का उपयोग करें। अन्य सभी मामलों में, ng-if का उपयोग करें।

Comments

हाँ, मुझे लगता है कि यह एनजी-अगर का लक्ष्य है: प्रसंस्करण समय को कम करना। यह निर्देश न केवल कुछ सीएसएस छद्मलेक्टर्स के कारण सुनिश्चित करने के लिए मौजूद है। अच्छी पोस्ट! +1

— बार्टोलोमिएज ज़लवस्की

Answer 3

ng-ifनिर्देश पेज से सामग्री निकालता और ng-show/ng-hideसीएसएस का उपयोग करता है displayछिपाने सामग्री के लिए संपत्ति।

यह उस स्थिति में उपयोगी है जब आप शैली का चयन करना चाहते हैं :first-childऔर :last-childछद्म चयनकर्ता चाहते हैं।

Comments

आप का उपयोग करके क्या मतलब है: पहला और: अंतिम चयनकर्ता?

— स्टीफन रोलैंड

ओह, मेरा मतलब था :first-childऔर :last-child developer.mozilla.org/en-US/docs/Web/CSS/:first-child developer.mozilla.org/en-US/docs/Web/CSS/:last-child

— आंद्रेई

Answer 4

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

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

Answer 5

एनजी-अगर और एनजी-शो के बारे में ध्यान देने वाली एक महत्वपूर्ण बात यह है कि फॉर्म नियंत्रण का उपयोग करते समय इसका उपयोग करना बेहतर होता है ng-ifक्योंकि यह तत्व को पूरी तरह से डोम से हटा देता है।

यह अंतर महत्वपूर्ण है क्योंकि यदि आप एक इनपुट फ़ील्ड बनाते हैं required="true"और फिर ng-show="false"इसे छिपाने के लिए सेट करते हैं, तो उपयोगकर्ता द्वारा फ़ॉर्म सबमिट करने का प्रयास करने पर Chrome निम्न त्रुटि करेगा:

An invalid form control with name='' is not focusable.

इनपुट क्षेत्र होने का कारण मौजूद है और यह है, requiredलेकिन चूंकि यह छिपा हुआ है क्रोम इस पर ध्यान केंद्रित नहीं कर सकता है। यह शाब्दिक रूप से आपके कोड को तोड़ सकता है क्योंकि यह त्रुटि स्क्रिप्ट निष्पादन को रोकती है। तो सावधान रहें!

Comments

यह वास्तविक तथ्य है, यदि आप सत्यापन के लिए प्रपत्र नियंत्रण का उपयोग कर रहे हैं तो एनजी-शो / एनजी-छिपाने का उपयोग करने पर आपको बहुत नुकसान होगा। और अगर आपके पास अभिव्यक्ति के आधार पर कई खंड छिपे / शो हैं। इसलिए यदि आप एनजी-शो का उपयोग करते हैं / छिपाते हैं तो तत्व अभी भी वहां होंगे और सत्यापन विफल हो जाएगा, इसके बावजूद स्क्रीन पर नहीं। so ng-if रेस्क्यू

— यू

Answer 6

@ गजस कुइजिनास और @ कोडहैटर सही हैं। यहां मैं सिर्फ एक उदाहरण दे रहा हूं। जब हम एनजी के साथ काम कर रहे हैं-अगर, यदि निर्धारित मूल्य गलत है, तो पूरे html तत्वों को DOM से हटा दिया जाएगा। और यदि असाइन किया गया मान सत्य है, तो html तत्व DOM पर दिखाई देंगे। और पैरेंट स्कोप की तुलना में स्कोप अलग होगा। लेकिन एनजी-शो के मामले में, यह सिर्फ दिखावा करता है और निर्दिष्ट मूल्य के आधार पर तत्वों को छिपाता है। लेकिन यह हमेशा DOM में रहता है। नियत मान के अनुसार केवल दृश्यता बदलती है।

http://plnkr.co/edit/3G0V9ivUzzc8kpLb1OQn?p=preview

आशा है कि यह उदाहरण आपको स्कोप को समझने में मदद करेगा। एनजी-शो और एनजी-अगर को गलत मान देने की कोशिश करें और कंसोल में डोम की जांच करें। इनपुट बॉक्स में मान दर्ज करने का प्रयास करें और अंतर का निरीक्षण करें।

<!DOCTYPE html>

हैलो प्लंकर!

<input type="text" ng-model="data">
<div ng-show="true">
    <br/>ng-show=true :: <br/><input type="text" ng-model="data">
</div>
<div ng-if="true">
    <br/>ng-if=true :: <br/><input type="text" ng-model="data">
</div> 
{{data}}

Answer 7

तथ्य, यह ng-ifनिर्देश, विपरीत ng-show, अपना स्वयं का दायरा बनाता है, दिलचस्प व्यावहारिक अंतर की ओर जाता है:

angular.module('app', []).controller('ctrl', function($scope){
  $scope.delete = function(array, item){
    array.splice(array.indexOf(item), 1);
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app='app' ng-controller='ctrl'>
   <h4>ng-if:</h4>
   <ul ng-init='arr1 = [1,2,3]'>
      <li ng-repeat='x in arr1'>
        {{show}}
        <button ng-if='!show' ng-click='show=!show'>Delete {{show}}</button>
        <button ng-if='show' ng-click='delete(arr1, x)'>Yes {{show}}</button>
        <button ng-if='show' ng-click='show=!show'>No</button>
      </li>
   </ul>
   
   <h4>ng-show:</h4>
   <ul ng-init='arr2 = [1,2,3]'>
      <li ng-repeat='x in arr2'>
        {{show}}
        <button ng-show='!show' ng-click='show=!show'>Delete {{show}}</button>
        <button ng-show='show' ng-click='delete(arr2, x)'>Yes {{show}}</button>
        <button ng-show='show' ng-click='show=!show'>No</button>
      </li>
   </ul>
   
   <h4>ng-if with $parent:</h4>
    <ul ng-init='arr3 = [1,2,3]'>
      <li ng-repeat='item in arr3'>
        {{show}}
        <button ng-if='!show' ng-click='$parent.show=!$parent.show'>Delete {{$parent.show}}</button>
        <button ng-if='show' ng-click='delete(arr3, x)'>Yes {{$parent.show}}</button>
        <button ng-if='show' ng-click='$parent.show=!$parent.show'>No</button>
      </li>
   </ul>
</div>

पहली सूची में, on-clickघटना, showचर, पारी / स्वयं के दायरे से, बदल जाती है, लेकिन ng-ifएक ही नाम के साथ बाहरी दायरे से दूसरे चर को देख रही है , इसलिए समाधान काम नहीं करता है। मामले में ng-showहमारे पास केवल एक showचर है, यही कारण है कि यह काम करता है। पहले प्रयास को ठीक करने के लिए, हमें showमाता-पिता / बाहरी दायरे से संदर्भ लेना चाहिए $parent.show।

Answer 8

1. ng-if यदि गलत DOM से तत्वों को हटा देगा। इसका मतलब है कि आपके सभी ईवेंट, उन तत्वों से जुड़े निर्देश खो जाएंगे। उदाहरण के लिए, चाइल्ड तत्वों में से किसी एक पर एनजी-क्लिक करें, जब एनजी-अगर गलत का मूल्यांकन करता है, तो उस तत्व को डीओएम से हटा दिया जाएगा और फिर से सही होने पर इसे फिर से बनाया जाएगा।

2. ng-show / ng-hide तत्वों को DOM से नहीं हटाता है। यह तत्वों को छिपाने / दिखाने के लिए CSS स्टाइल (.ng-hide) का उपयोग करता है। इस तरह से आपके ईवेंट, निर्देश जो बच्चों से जुड़े थे, खो नहीं जाएंगे।

3. एनजी-शो-चाइल्ड स्कोप बनाता है जबकि एनजी-शो / एनजी-हाइड नहीं करता है।

Answer 9

एनजी-शो और एनजी-छिपाने का काम विपरीत तरीके से। लेकिन ng-if के साथ ng-hide या ng-show के बीच का अंतर है, अगर हम ng-if का उपयोग करते हैं तो तत्व dom में बनाए जाएंगे लेकिन ng-hide / ng-show तत्व के साथ पूरी तरह से छिपाया जाएगा।

ng-show=true/ng-hide=false:
Element will be displayed

ng-show=false/ng-hide=true:
element will be hidden

ng-if =true
element will be created

ng-if= false
element will be created in the dom. 

Answer 10

ध्यान देने के लिए, अब मेरे साथ हुई एक चीज़: एनजी-शो सामग्री को सीएसएस के माध्यम से छिपाता है, हाँ, लेकिन इससे डीवाज़ बटन में अजीब ग्लिट्स उत्पन्न होते हैं।

मेरे पास नीचे की ओर दो बटन वाला एक कार्ड था और वास्तविक स्थिति पर निर्भर करता है कि एक का तीसरे के साथ आदान-प्रदान होता है, उदाहरण के लिए नई प्रविष्टि वाला बटन। एनजी-शो का उपयोग करना = बाएं को छिपाने के लिए गलत (फ़ाइल में पहले मौजूद) ऐसा हुआ कि निम्नलिखित बटन कार्ड के बाहर दाईं सीमा के साथ समाप्त हो गया। एनजी-अगर वह ठीक करता है जिसमें कोड शामिल नहीं है। (बस यहां जांचा जाता है कि क्या एनजी-शो के बजाय एनजी का उपयोग करके कुछ छिपे हुए आश्चर्य हैं)

Answer 11

ngIf तत्व को हटाकर या पुनः निर्मित करके DOM पर एक हेरफेर करता है।

जबकि ngShow चीजों को छिपाने / दिखाने के लिए एक css नियम लागू करता है।

अधिकांश मामलों के लिए (हमेशा नहीं) , मैं इसे संक्षेप में बताऊंगा, यदि आपको चीजों को दिखाने / छिपाने के लिए एक बार जांच की ng-ifआवश्यकता है, तो उपयोग करें , यदि आपको स्क्रीन पर उपयोगकर्ता कार्यों के आधार पर चीजों को दिखाने / छिपाने की आवश्यकता है (जैसे कि जाँच की गई है) एक चेकबॉक्स तब टेक्स्टबॉक्स दिखाते हैं, अनचेक किया जाता है फिर टेक्स्टबॉक्स आदि को छिपाएं।), फिर उपयोग करेंng-show

Answer 12

एनजी-अगर और एनजी-शो में एक दिलचस्प अंतर यह है:

सुरक्षा

एनजी-अगर ब्लॉक में मौजूद डोम तत्व को इसके मूल्य के मामले में गलत नहीं माना जाएगा

जहां एनजी-शो के मामले में, उपयोगकर्ता आपके निरीक्षण तत्व विंडो को खोल सकता है और इसका मूल्य TRUE पर सेट कर सकता है।

और एक व्हाटसप के साथ, पूरी सामग्री जो छिपाई जानी थी, प्रदर्शित हो जाती है, जो एक सुरक्षा उल्लंघन है। :)

Comments

यह सुरक्षा का बेहद कमजोर रूप है। यदि सामग्री क्लाइंट को सर्वर द्वारा दी जाती है, तो आपको यह मान लेना होगा कि उपयोगकर्ता / हमलावर इसे एक्सेस कर सकते हैं, भले ही यह डोम में मौजूद हो या नहीं। सभी प्राधिकरण तर्क सर्वर द्वारा लागू किए जाने चाहिए।

— tlrobinson 18

jsp के बजाय html के बारे में सोचें ... अब यदि आप html घटकों पर सुरक्षा लागू करना चाहते हैं .. तो यदि आप उपयोगकर्ता से कुछ घटकों को छिपाना चाहते हैं ... तो आप इसे कैसे प्राप्त करेंगे। और अगर आपके कॉन्फ़िगरेशन को बैकएंड के लिए सर्वर साइड में और फ्रंट एंड के लिए क्लाइंट साइड में विभाजित किया गया है ..

— आशीष_जून