AngularJS एनजी-क्लिक, एनजी-शो और एनजी-छिपाएँ निर्देश

द्वारा: जेम्स हार्टमैन जेम्स हार्टमैन
Hours Updated

⚡ स्मार्ट सारांश

AngularJS इवेंट्स वेब एप्लिकेशन को माउस क्लिक, कीबोर्ड प्रेस और होवर जैसी उपयोगकर्ता इनपुट प्रतिक्रियाओं का जवाब देने में सक्षम बनाते हैं। ng-click, ng-show और ng-hide जैसे डायरेक्टिव्स इस व्यवहार को मैन्युअल DOM लिसनर्स के बजाय मार्कअप में डिक्लेरेटिव रूप से बाध्य करते हैं।

  • ️ क्लिक हैंडलिंग: ng-click किसी एलिमेंट, आमतौर पर एक बटन, से एक एक्सप्रेशन या कंट्रोलर फंक्शन को जोड़ता है।
  • ️ सशर्त प्रदर्शन: ng-show किसी एलिमेंट को तब रेंडर करता है जब उसका एक्सप्रेशन सही होता है, जबकि ng-hide उसे तब हटा देता है जब एक्सप्रेशन सही होता है।
  • 🎨 तंत्र: दोनों निर्देश अंतर्निहित ng-hide CSS क्लास को टॉगल करते हैं, जो डिस्प्ले को none पर सेट करता है, जिससे एलिमेंट DOM में बना रहता है।
  • 🔗 स्कोप बाइंडिंग: $scope पर रखा गया एक सदस्य चर दृश्यता को नियंत्रित करता है, और एक हैंडलर के अंदर इसे बदलने से दृश्य तुरंत अपडेट हो जाता है।
  • ???? निर्देशात्मक सीमा: अठारह श्रोता निर्देश ब्लर, परिवर्तन, फोकस, कीबोर्ड, माउस, पेस्ट और सबमिट इवेंट को कवर करते हैं।
  • ⚠️ समर्थन स्थिति: AngularJS का सपोर्ट 31 दिसंबर 2021 को समाप्त हो गया, इसलिए नए प्रोजेक्ट्स को इसके बजाय आधुनिक Angular को टारगेट करना चाहिए।
विस्तार में पढ़ें

AngularJS एनजी-क्लिक करें एनजी-शो एनजी-छिपाएँ निर्देश

AngularJS इवेंट

AngularJS इवेंट वेब एप्लिकेशन को माउस क्लिक, कीबोर्ड इनपुट और माउस होवर जैसे उपयोगकर्ता इनपुट के साथ इंटरैक्ट करने की अनुमति देने वाली कार्यक्षमताएं इवेंट्स हैं। विशिष्ट कार्यों और क्रियाओं को करने के लिए वेब एप्लिकेशन में इवेंट्स को हैंडल करना आवश्यक है, और प्रत्येक इवेंट तब ट्रिगर होता है जब उपयोगकर्ता संबंधित क्रिया करता है।

वेब एप्लिकेशन बनाते समय, देर-सवेर आपके एप्लिकेशन को माउस क्लिक और मूवमेंट, कीबोर्ड प्रेस और चेंज इवेंट जैसे DOM इवेंट्स को हैंडल करने की आवश्यकता होती है। AngularJS यह उन निर्देशों की आपूर्ति करता है जो इन घटनाओं को घोषणात्मक रूप से संभालते हैं।

उदाहरण के लिए, यदि पृष्ठ पर किसी बटन को क्लिक करने पर कुछ प्रक्रिया करनी चाहिए, तो ng-click इवेंट डायरेक्टिव वह हुक प्रदान करता है।

⚠️ सहायता सूचना: AngularJS पहुँच गया 31 दिसंबर 2021 को उनका निधन हो गया। और एंगुलर टीम से इसे कोई और पैच या सुरक्षा सुधार नहीं मिलता है। नीचे दिए गए निर्देश मौजूदा AngularJS 1.x एप्लिकेशन को बनाए रखने के लिए सटीक हैं; नए काम के लिए, आधुनिक संस्करण का उपयोग करें। कोणीयजहां इन निर्देशों को इवेंट बाइंडिंग द्वारा प्रतिस्थापित किया जाता है, जैसे कि (click) और तक *ngIf.

AngularJS में ng-click डायरेक्टिव क्या है?

RSI “एनजी-क्लिक निर्देश” AngularJS में यह फ़ंक्शन HTML एलिमेंट पर क्लिक होने पर कस्टम व्यवहार लागू करता है। इसका उपयोग आमतौर पर बटनों पर किया जाता है, क्योंकि क्लिक प्रतिक्रियाओं को जोड़ने के लिए वे सबसे आम स्थान हैं, और इसका उपयोग क्लिक पर अलर्ट दिखाने के लिए भी किया जाता है।

AngularJS में ng-click का सिंटैक्स

<element
 ng-click="expression">
</element>

AngularJS में ng-click का उदाहरण

इस ng-click उदाहरण में, जब भी उपयोगकर्ता किसी बटन पर क्लिक करता है, तो एक काउंटर वेरिएबल में वृद्धि होती है।

AngularJS में डायरेक्टिव पर एनजी-क्लिक करें

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body ng-app="">

<script src="https://code.angularjs.org/1.8.3/angular.js"></script>

<h1>Guru99 Global Event</h1>

<button ng-click="count = count + 1" ng-init="count=0">
    Increment
</button>

<div>The Current Count is {{count}}</div>

</body>
</html>

Code स्पष्टीकरण:

  1. ng-init निर्देश स्थानीय चर को सेट करता है count 0 लिए.
  2. बटन पर ng-click निर्देश वृद्धि करता है count प्रत्येक क्लिक पर 1 की वृद्धि।
  3. प्रक्षेप {{count}} यह उपयोगकर्ता को वर्तमान मान प्रदर्शित करता है।

आउटपुट:

AngularJS में ng-क्लिक

इंक्रीमेंट बटन दिखाई देता है और शुरुआत में गिनती शून्य होती है। इस पर क्लिक करने से मान बढ़ता है, जैसा कि नीचे दी गई छवि में दिखाया गया है।

AngularJS में ng-क्लिक

AngularJS में ng-show डायरेक्टिव क्या है?

RSI एनजी-शो निर्देश किसी दिए गए मान को दिखाता या छुपाता है एचटीएमएल ng-show विशेषता को दिए गए एक्सप्रेशन के आधार पर एलिमेंट को प्रदर्शित या छिपाया जाता है। आंतरिक रूप से, एलिमेंट को ng-show विशेषता को हटाकर या जोड़कर दिखाया या छिपाया जाता है। .ng-hide CSS क्लास, एक पूर्वनिर्धारित क्लास जो सेट करती है display सेवा मेरे none.

AngularJS में ng-show का सिंटैक्स

<element
 ng-show="expression">
</element>

AngularJS में ng-show का उदाहरण

इस उदाहरण में छिपे हुए तत्व को प्रकट करने के लिए ng-show का उपयोग किया गया है।

AngularJS में ng-show निर्देश

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.8.3/angular.js"></script>

<h1>Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
    <input type="button" value="Show Angular" ng-click="ShowHide()"/>

    <br><br><div ng-show="IsVisible">Angular</div>
</div>

<script type="text/javascript">

    var app = angular.module('DemoApp', []);

    app.controller('DemoController', function($scope) {
        $scope.IsVisible = false;

        $scope.ShowHide = function() {
            $scope.IsVisible = true;
        };
    });
</script>

</body>
</html>

Code स्पष्टीकरण:

  1. बटन पर मौजूद ng-click निर्देश एक को संदर्भित करता है। ShowHide नियंत्रक में परिभाषित फ़ंक्शन DemoController.
  2. Angular टेक्स्ट वाले div में ng-show एट्रिब्यूट लगा हुआ है। यही वह एलिमेंट है जिसकी विजिबिलिटी नियंत्रित की जाती है।
  3. नियंत्रक में, IsVisible सदस्य चर को स्कोप ऑब्जेक्ट पर रखा जाता है और उसे इनिशियलाइज़ किया जाता है। falseइसलिए, पेज पहली बार लोड होने पर div छिपा रहता है। ng-show के साथ, मान <strong>उद्देश्य</strong> तत्व प्रदर्शित करता है और असत्य इसे छुपाता है।
  4. RSI ShowHide फ़ंक्शन सेट IsVisible इसे true पर सेट करें ताकि div दिखाई दे।

आउटपुट:

AngularJS में ng-show निर्देश

टेक्स्ट को रखने वाला div शुरू में नहीं दिखाया जाता है, क्योंकि IsVisible शुरुआत में गलत। क्लिक करने पर एंगुलर दिखाएँ इसे true पर सेट कर दिया जाता है और टेक्स्ट दिखाई देने लगता है।

AngularJS में ng-show निर्देश

संबंधित आलेख

AngularJS में ng-hide डायरेक्टिव क्या है?

RSI एनजी-छिपाओ निर्देश यह फ़ंक्शन किसी एलिमेंट को तब छुपाता है जब उसका एक्सप्रेशन TRUE होता है, और एक्सप्रेशन FALSE होने पर उसे दिखाता है — यह ng-show का ठीक उल्टा है। आंतरिक रूप से यह उसी का उपयोग करता है। .ng-hide सीएसएस वर्ग.

AngularJS में ng-hide का सिंटैक्स

<element
 ng-hide="expression">
</element>

AngularJS में ng-hide का उदाहरण

यह उदाहरण ng-show उदाहरण के समान है, इसलिए दोनों निर्देशों की सीधे तुलना की जा सकती है।

AngularJS में ng-hide निर्देश

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.8.3/angular.js"></script>

<h1>Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
    <input type="button" value="Hide Angular" ng-click="ShowHide()"/>

    <br><br><div ng-hide="IsVisible">Angular</div>
</div>

<script type="text/javascript">

    var app = angular.module('DemoApp', []);

    app.controller('DemoController', function($scope) {
        $scope.IsVisible = false;

        $scope.ShowHide = function() {
            $scope.IsVisible = true;
        };
    });
</script>

</body>
</html>

Code स्पष्टीकरण:

  1. बटन पर मौजूद ng-click निर्देश निम्नलिखित को संदर्भित करता है: ShowHide समारोह में DemoController.
  2. RSI एनजी: छिपाएं यह एट्रिब्यूट Angular टेक्स्ट वाले div से जुड़ा हुआ है।
  3. IsVisible को आरंभ किया जाता है falseक्योंकि यह ng-show के बजाय ng-hide है, इसलिए false मान का मतलब है कि div छिपा हुआ है। दिखाई जब पेज पहली बार लोड होता है।
  4. RSI ShowHide फ़ंक्शन सेट IsVisible इसे true पर सेट करने से div छिप जाता है।

आउटपुट:

AngularJS में ng-hide निर्देश

div शुरू में इसलिए दिखाई देता है क्योंकि ng-hide को false पास किया गया है। क्लिक करने पर एंगुलर को छिपाएँ सही साबित होता है और शब्द गायब हो जाता है।

AngularJS में ng-hide निर्देश

एनजी-शो बनाम एनजी-हाइड बनाम एनजी-इफ: मुख्य अंतर

तीन निर्देश यह नियंत्रित करते हैं कि उपयोगकर्ता को कोई तत्व दिखाई देगा या नहीं, और इनमें से किसी एक को चुनने से व्यवहार और रेंडरिंग प्रदर्शन दोनों प्रभावित होते हैं। पहले दो निर्देश केवल एक CSS क्लास को टॉगल करते हैं, जिससे तत्व हमेशा पृष्ठ पर मौजूद रहता है; तीसरा निर्देश तत्व को जोड़ता और हटाता है।

पहलू एनजी शो एनजी: छिपाएं एनजी-इफ
तत्व तब दृश्यमान होता है जब अभिव्यक्ति सत्य है अभिव्यक्ति गलत है अभिव्यक्ति सत्य है
DOM में तत्व सदैव सदैव केवल तभी जब सत्य हो
प्रयुक्त विधि Toggles .ng-hide क्लास Toggles .ng-hide क्लास यह तत्व को बनाता और नष्ट करता है।
बाल क्षेत्र पैरेंट स्कोप साझा करता है पैरेंट स्कोप साझा करता है एक नया चाइल्ड स्कोप बनाता है
जब पहरेदार छिपे होते हैं अभी भी सक्रिय अभी भी सक्रिय हटाया
के लिए सबसे अच्छा प्रकाश सामग्री का बार-बार बदलना उलटी स्थितियाँ भारी सामग्री बहुत कम दिखाई जाती है

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

AngularJS इवेंट श्रोता निर्देश

आप इनमें से एक या अधिक तरीकों का उपयोग करके HTML तत्वों में AngularJS इवेंट लिसनर जोड़ सकते हैं। निर्देशों:

  • एनजी-धुंधला
  • एनजी-परिवर्तन
  • एनजी क्लिक
  • एनजी-कॉपी
  • एनजी-कट
  • एनजी-dblclick
  • एनजी-फोकस
  • एनजी-कीडाउन
  • एनजी-कीप्रेस
  • एनजी-कीप
  • एनजी-माउसडाउन
  • एनजी-माउसएंटर
  • एनजी-माउसलीव
  • एनजी-माउसमूव
  • एनजी-माउसओवर
  • एनजी-माउसअप
  • एनजी-पेस्ट
  • एनजी-सबमिट

प्रत्येक निर्देश एक अभिव्यक्ति को स्वीकार करता है, और इसके भीतर मूल ब्राउज़र इवेंट उपलब्ध होता है। $event जब हैंडलर को दबाई गई कुंजी या क्लिक निर्देशांक जैसे विवरणों की आवश्यकता होती है।

अक्सर पूछे जाने वाले प्रश्न

आरक्षित मार्ग से गुजरें $event चर, जैसा कि ng-click="handle($event)"इसके बाद कंट्रोलर नेटिव इवेंट प्राप्त करता है और टारगेट, कोऑर्डिनेट पढ़ सकता है या प्रिवेंटडिफ़ॉल्ट को कॉल कर सकता है।

ng-repeat प्रत्येक आइटम के लिए एक चाइल्ड स्कोप बनाता है, इसलिए हैंडलर के अंदर एक प्रिमिटिव असाइन करने से केवल वही चाइल्ड अपडेट होता है। पैरेंट स्कोप पर किसी ऑब्जेक्ट प्रॉपर्टी में लिखें, या उपयोग करें $parentताकि यह बदलाव बाहर दिखाई दे सके।

आंशिक रूप से। AI टूल ng-click को परिवर्तित करते हैं (click) और ng-show को *ngIf विश्वसनीय रूप से, लेकिन स्कोप-निर्भर तर्क और दो-तरफ़ा बाइंडिंग की मैन्युअल समीक्षा की आवश्यकता होती है, क्योंकि AngularJS स्कोप का Angular में कोई प्रत्यक्ष समकक्ष नहीं है।

एआई सहायक सामान्य कारणों को तुरंत पहचान लेते हैं: ng-app का न होना, मॉड्यूल पंजीकरण से मेल न खाने वाला नियंत्रक नाम, या डायरेक्टिव एट्रिब्यूट में टाइपिंग की गलती। सुझाए गए समाधान का अभी ब्राउज़र में परीक्षण किया जाना बाकी है।

नहीं। AngularJS केवल ng-show, ng-hide और ng-if निर्देश प्रदान करता है। ng-visible निर्देश मौजूद नहीं है, और इसका संदर्भ देने से कोई प्रभाव नहीं पड़ता क्योंकि AngularJS अपरिचित विशेषताओं को अनदेखा कर देता है।

इस पोस्ट को संक्षेप में इस प्रकार लिखें: