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

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

AngularJS इवेंट

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

वेब-आधारित अनुप्रयोग बनाते समय, देर-सवेर आपके अनुप्रयोग को DOM ईवेंट जैसे माउस क्लिक, चाल, कीबोर्ड प्रेस, परिवर्तन ईवेंट आदि को संभालने की आवश्यकता होगी।

AngularJS ऐसी कार्यक्षमता जोड़ सकते हैं जिसका उपयोग ऐसी घटनाओं को संभालने के लिए किया जा सकता है।

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

इस पाठ्यक्रम के दौरान हम इवेंट निर्देशों पर विस्तार से विचार करेंगे।

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

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

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

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

आइए एक सरल उदाहरण देखें कि हम क्लिक इवेंट को कैसे क्रियान्वित कर सकते हैं।

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

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

AngularJS में डायरेक्टिव पर एनजी-क्लिक करें
AngularJS में ng क्लिक का उदाहरण
<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body ng-app="">

<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.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>

कोड स्पष्टीकरण:

  1. हम पहले स्थानीय चर count का मान 0 पर सेट करने के लिए ng-init निर्देश का उपयोग कर रहे हैं।
  2. फिर हम बटन में ng-click इवेंट निर्देश पेश कर रहे हैं। इस निर्देश में, हम count वेरिएबल के मान को 1 से बढ़ाने के लिए कोड लिख रहे हैं।
  3. यहां हम उपयोगकर्ता को count variable का मान प्रदर्शित कर रहे हैं।

यदि कोड सफलतापूर्वक निष्पादित हो जाता है, तो जब आप अपना कोड ब्राउज़र में चलाएंगे तो निम्नलिखित आउटपुट दिखाया जाएगा।

आउटपुट:

AngularJS में ng-क्लिक

उपरोक्त आउटपुट से,

  • हम देख सकते हैं कि “Increment” बटन प्रदर्शित होता है और count variable का मान प्रारंभ में शून्य है।
  • जब आप इंक्रीमेंट बटन पर क्लिक करते हैं, तो गिनती का मान तदनुसार बढ़ जाता है जैसा कि नीचे दिए गए आउटपुट चित्र में दिखाया गया है।

AngularJS में ng-क्लिक

संबंधित आलेख

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

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

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

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

पृष्ठभूमि में, तत्व पर .ng-hide CSS वर्ग को हटाकर या जोड़कर तत्व को दिखाया या छुपाया जाता है।

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

आइए Angular में ng-show का एक उदाहरण देखें कि कैसे हम एक छिपे हुए तत्व को प्रदर्शित करने के लिए "ngshow event" निर्देश का उपयोग कर सकते हैं।

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

Angular में ng शो का उदाहरण
<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.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>

कोड स्पष्टीकरण:

  1. हम ng-click इवेंट निर्देश को बटन तत्व से जोड़ रहे हैं। यहाँ हम “ShowHide” नामक फ़ंक्शन का संदर्भ दे रहे हैं जिसे हमारे नियंत्रक - DemoController में परिभाषित किया गया है।
  2. हम ng-show विशेषता को div टैग से जोड़ रहे हैं जिसमें Angular टेक्स्ट है। यह वह टैग है जिसे हम ng-show विशेषता के आधार पर दिखाने/छिपाने जा रहे हैं।
  3. नियंत्रक में, हम "IsVisible" सदस्य चर को स्कोप ऑब्जेक्ट से जोड़ रहे हैं। यह विशेषता ng-show कोणीय विशेषता (चरण # 2) को div नियंत्रण की दृश्यता को नियंत्रित करने के लिए पारित की जाएगी। हम शुरू में इसे गलत पर सेट कर रहे हैं ताकि जब पृष्ठ पहली बार प्रदर्शित हो तो div टैग छिपा रहे। नोट: - जब विशेषता ng-show को true पर सेट किया जाता है, तो बाद का नियंत्रण जो हमारे मामले में div टैग है, उपयोगकर्ता को दिखाया जाएगा। जब ng-show विशेषता को false पर सेट किया जाता है, तो नियंत्रण उपयोगकर्ता से छिपा दिया जाएगा।
  4. हम ShowHide फ़ंक्शन में कोड जोड़ रहे हैं जो IsVisible सदस्य चर को true पर सेट करेगा ताकि AngularJS शो हाइड div ऑन क्लिक टैग उपयोगकर्ता को दिखाया जा सके।

यदि AngularJS में ng-show और ng-hide के लिए कोड सफलतापूर्वक निष्पादित किया जाता है, तो जब आप ब्राउज़र में अपना कोड चलाएंगे तो निम्नलिखित आउटपुट दिखाया जाएगा।

आउटपुट: २

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

आउटपुट से,

  • आप शुरू में देख सकते हैं कि div टैग जिसमें "AngularJS" टेक्स्ट है, नहीं दिखाया गया है और ऐसा इसलिए है क्योंकि isVisible स्कोप ऑब्जेक्ट को शुरू में false पर सेट किया गया है, जिसे बाद में div टैग के ng-show डायरेक्टिव में पास कर दिया गया है।
  • जब आप “शो एंगुलरजेएस” बटन पर क्लिक करते हैं, तो यह isVisible सदस्य वैरिएबल को बदलकर true कर देता है और इसलिए “Angular” टेक्स्ट यूजर को दिखाई देने लगता है। यूजर को नीचे दिया गया आउटपुट दिखाया जाएगा।

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

आउटपुट अब Angular टेक्स्ट के साथ div टैग दिखाता है।

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

RSI एनजी-छिपाओ निर्देश AngularJS में एक फ़ंक्शन है जिसके उपयोग से यदि अभिव्यक्ति सत्य है तो तत्व छिपा दिया जाएगा। यदि अभिव्यक्ति असत्य है, तो तत्व दिखाया जाएगा। बैकग्राउंड में, तत्व पर .ng-hide CSS क्लास को हटाकर या जोड़कर तत्व दिखाया या छिपाया जाता है।

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

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

दूसरी ओर ng-hide के साथ, यदि अभिव्यक्ति सत्य है तो तत्व छिपा दिया जाता है और यदि यह गलत है तो इसे दिखाया जाएगा।

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

आइए ng-hide और ng-show विशेषताओं का उपयोग कैसे किया जा सकता है, यह दिखाने के लिए ngShow के लिए दिखाए गए समान ng-hide उदाहरण को देखें।

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

AngularJS में ng-hide का उदाहरण
<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.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 = $scope.IsVisible = true;
        }
        });
</script>

</body>
</html>

कोड स्पष्टीकरण:

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

यदि ng show hide के लिए कोड सफलतापूर्वक निष्पादित किया जाता है, तो जब आप ब्राउज़र में अपना कोड चलाएंगे तो निम्नलिखित आउटपुट दिखाया जाएगा।

आउटपुट:

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

आउटपुट से,

  • आप आरंभ में देख सकते हैं कि div टैग जिसमें “AngularJs” टेक्स्ट है, आरंभ में दिखाया गया है क्योंकि false का प्रॉपर्टी मान ng-hide डायरेक्टिव को भेजा गया है।
  • जब हम “Hide Angular” बटन पर क्लिक करेंगे तो true की प्रॉपर्टी वैल्यू ng-hide डायरेक्टिव को भेज दी जाएगी। इसलिए नीचे दिया गया आउटपुट दिखाया जाएगा, जिसमें “Angular” शब्द छिपा दिया जाएगा।

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

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

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

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

सारांश

  • एंगुलर में इवेंट निर्देशों का उपयोग उपयोगकर्ता के हस्तक्षेप, जैसे बटन क्लिक, कीबोर्ड और माउस क्लिक आदि से उत्पन्न इवेंट्स पर प्रतिक्रिया देने के लिए कस्टम कोड जोड़ने के लिए किया जाता है।
  • सबसे आम इवेंट डायरेक्टिव AngularJS ng-click डायरेक्टिव है जिसका उपयोग क्लिक इवेंट को संभालने के लिए किया जाता है। इसका सबसे आम उपयोग AngluarJS बटन क्लिक के लिए होता है जिसमें बटन क्लिक का जवाब देने के लिए कोड जोड़ा जा सकता है।
  • HTML तत्वों को भी उपयोगकर्ता के अनुसार छिपाया या दिखाया जा सकता है। AngularJS ng-show निर्देश, कोणीय एनजी-छिपाएँ निर्देश और एनजी-दृश्य विशेषताएँ।