AngularJS => Gebruik van ingebouwde richtlijnen

HTML-elementen verbergen / weergeven

Dit voorbeeld verbergt HTML-elementen weergeven.

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

Stap voor stap uitleg:

ng-app="myDemoApp" , de ngApp- instructie vertelt hoekig dat een DOM-element wordt bestuurd door een specifieke hoekmodule genaamd "myDemoApp".
<script src="[//angular include]"> include angular js.
HideShowController functie HideShowController is gedefinieerd met een andere functie met de naam toggle die helpt om het element te verbergen.
angular.module(...) maakt een nieuwe module.
.controller(...) Angular Controller en retourneert de module voor chaining;
ng-controller richtlijn is een belangrijk aspect van hoe hoekig de principes achter het ontwerppatroon van Model-View-Controller ondersteunt.
ng-show instructie toont het gegeven HTML-element als de opgegeven expressie waar is.
ng-hide richtlijn verbergt het gegeven HTML-element als de opgegeven expressie waar is.
ng-click richtlijn vuren een toggle functie binnen controller

Modified text is an extract of the original Stack Overflow Documentation

Licentie onder CC BY-SA 3.0

Niet aangesloten bij Stack Overflow

AngularJS
Gebruik van ingebouwde richtlijnen

Zoeken…

HTML-elementen verbergen / weergeven