AngularJS में ngShow और ngHide निर्देशों का उपयोग करना

आज हम देखते हैं कि आप Angularjs में ngShow और ngHide निर्देशों का उपयोग कैसे कर सकते हैं।

उनकी आवश्यकता क्यों है?

ngShow और ngHide आपको विभिन्न तत्वों को दिखाते हैं या छिपाते हैं। यह कोणीय अनुप्रयोगों को बनाने में मदद करता है, क्योंकि हमारे एसपीए के कई हिस्से होने की संभावना है, जो हमारे आवेदन की स्थिति के आधार पर, छिपे या दिखाए जाने की आवश्यकता है।

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

के उपयोग

NgShow या ngHide का उपयोग करने के लिए, आपको बस उस तत्व को एक निर्देश जोड़ना होगा जिसे आप दिखाना या छिपाना चाहते हैं।

<!-- FOR BOOLEAN VALUES =============================== --> <!-- for true values --> <div ng-show="hello">this is a welcome message</div> <!-- can also show if a value is false --> <div ng-show="!hello">this is a goodbye message</div> <!-- FOR EXPRESSIONS =============================== --> <!-- show if the appState variable is a string of goodbye --> <div ng-show="appState == 'goodbye'">this is a goodbye message</div> <!-- FOR FUNCTIONS =============================== --> <!-- use a function defined in your controller to evaluate if true or false --> <div ng-hide="checkSomething()"></div> 

जब मार्कअप बनाया जाता है, तो आपको चर hello या goodbye के मूल्यों को सेट करने की आवश्यकता होती है। यह किया जा सकता है, उदाहरण के लिए, कोणीय नियंत्रक में और संबंधित div को एप्लिकेशन लोड करने के बाद दिखाया या छिपाया जाएगा।

बूलियन मूल्यों के साथ उपयोग करें

डेमो
हम एक लिंक ngClick , जो goCats वेरिएबल को true या false पर सेट करने के लिए ngClick का उपयोग करता है।

 <a href ng-click="goCats = !goCats">Toggle Cats</a> 

अब आप ng-show का उपयोग करके बिल्ली की छवि दिखा या छिपा सकते ng-show ।

 <img ng-src="http://i.imgur.com/vkW3Lhe.jpg" ng-show="goCats"> 

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

परिकलित भाव

डेमो
यहां हम अपने इनपुट फ़ील्ड से प्राप्त स्ट्रिंग की गणना करते हैं। हम aminal चर के साथ ng-model का उपयोग करके इनपुट फ़ील्ड को aminal हैं। दर्ज मूल्य के आधार पर, यदि कोई रेखा है, तो एक छवि प्रदर्शित की जाएगी।

 <input type="text" ng-model="aminal"> 

और एनजी-शो निर्देश में हम इस चर के मूल्य की गणना करेंगे

 <img ng-src="http://i.imgur.com/vkW3Lhe.jpg" ng-show="aminal == 'cat'"> 

फ़ंक्शन के साथ उपयोग करें

डेमो
यहां हम एक साधारण जांच करेंगे कि क्या दर्ज संख्या सम या विषम है। हम अपनी AngularJS फाइल में एक फंक्शन बनाएंगे:

 // set the default value of our number $scope.myNumber = 0; // function to evaluate if a number is even $scope.isEven = function(value) { if (value % 2 == 0) return true; else return false; }; 

अब, हमें बस इतना करना है कि एनजी-शो या एनजी-छिपाने का उपयोग करके फ़ंक्शन को कॉल करें और संख्याओं को पास करें।

 <!-- show if our function evaluates to false --> <div ng-show="isEven(myNumber)"> <h2>The number is even.</h2> </div> <!-- show if our function evaluates to false --> <div ng-show="!isEven(myNumber)"> <h2>The number is odd.</h2> </div> 

अंत में

जैसा कि हम देख सकते हैं, इन दो सबसे सरल निर्देशों के साथ बहुत कुछ किया जा सकता है। आशा है कि यह आपके अनुप्रयोगों के निर्माण में आपकी सहायता करेगा। थोड़ी देर बाद ngShow और ngHide के साथ संयोजन में एनिमेशन के उपयोग पर एक लेख होगा।

मूल लेख - scotch.io/tutorials/javascript/how-to-use-ngshow-and-nnide