AngularJS
अंतर्निहित निर्देशों का उपयोग

Angular 2 Cordova CSS HTML ionic-framework JavaScript jQuery Node.js PHP twitter-bootstrap

HTML तत्वों को छिपाएँ / दिखाएँ

यह उदाहरण छिपाने वाले HTML तत्वों को दिखाता है।

<!DOCTYPE html>
<html ng-app="myDemoApp">
  <head>
    <script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
    <script>

      function HideShowController() {
        var vm = this;
        vm.show=false;
        vm.toggle= function() {
          vm.show=!vm.show;
        }
      }
      
      angular.module("myDemoApp", [/* module dependencies go here */])
        .controller("hideShowController", [HideShowController]);
    </script>
  </head>
  <body ng-cloak>
    <div ng-controller="hideShowController as vm">
      <a style="cursor: pointer;" ng-show="vm.show" ng-click="vm.toggle()">Show Me!</a>
      <a style="cursor: pointer;" ng-hide="vm.show" ng-click="vm.toggle()">Hide Me!</a>
    </div>
  </body>
</html>

लाइव डेमो

कदम से कदम स्पष्टीकरण:

ng-app="myDemoApp" , ngApp निर्देश कोणीय को बताता है कि एक DOM तत्व "myDemoApp" नाम के एक विशिष्ट angular.module द्वारा नियंत्रित किया जाता है।
<script src="[//angular include]"> कोणीय js शामिल करें।
HideShowController फ़ंक्शन को toggle नामक एक अन्य फ़ंक्शन से परिभाषित किया गया है जो तत्व को छिपाने में मदद करता है।
angular.module(...) एक नया मॉड्यूल बनाता है।
.controller(...) कोणीय नियंत्रक और .controller(...) लिए मॉड्यूल लौटाता है;
ng-controller निर्देश मुख्य पहलू है कि कोणीय मॉडल-व्यू-कंट्रोलर डिजाइन पैटर्न के पीछे के सिद्धांतों का समर्थन कैसे करता है।
ng-show निर्देश दिए गए HTML तत्व को दिखाता है यदि प्रदान की गई अभिव्यक्ति सत्य है।
ng-hide निर्देश दिए गए एचटीएमएल तत्व को छुपाता है यदि प्रदान की गई अभिव्यक्ति सही है।
नियंत्रक के अंदर टॉगल फ़ंक्शन को ng-click डायरेक्टिव फायर करता है

Modified text is an extract of the original Stack Overflow Documentation

के तहत लाइसेंस प्राप्त है CC BY-SA 3.0

से संबद्ध नहीं है Stack Overflow