AngularJS
Verwendung von eingebauten Anweisungen

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


HTML-Elemente ausblenden / anzeigen

In diesem Beispiel werden show html-Elemente ausgeblendet. 

<!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>

Live Demo

Schritt für Schritt Erklärung:

  1. ng-app="myDemoApp" , die ngApp- Direktive teilt wink mit, dass ein DOM-Element von einem bestimmten angle.module mit dem Namen "myDemoApp" gesteuert wird.
  2. <script src="[//angular include]"> angle <script src="[//angular include]"> enthält winklige js.
  3. HideShowController Funktion enthält eine weitere Funktion namens toggle deren Hilfe das Element HideShowController kann.
  4. angular.module(...) erstellt ein neues Modul.
  5. .controller(...) Angular Controller und .controller(...) das Modul zur Verkettung zurück;
  6. ng-controller Direktive ist ein wesentlicher Aspekt dafür, wie eckig die Prinzipien des Model-View-Controller-Entwurfsmusters unterstützt.
  7. ng-show Direktive zeigt das angegebene HTML-Element, wenn der angegebene Ausdruck "true" ist.
  8. ng-hide Anweisung ng-hide verbirgt das angegebene HTML-Element, wenn der angegebene Ausdruck "true" ist.
  9. ng-click Direktive löst eine Umschaltfunktion im Controller aus


Modified text is an extract of the original Stack Overflow Documentation
Lizenziert unter CC BY-SA 3.0
Nicht angeschlossen an Stack Overflow