AngularJS => Användning av inbyggda direktiv

Dölj / Visa HTML-element

Detta exempel dölj show html-element.

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

Steg för steg förklaring:

ng-app="myDemoApp" , ngApp- direktivet berättar vinklat att ett DOM-element styrs av en specifik vinkell.modul med namnet "myDemoApp".
<script src="[//angular include]"> inkluderar vinkel js.
HideShowController funktionen definieras som innehåller en annan funktion som heter toggle som hjälper till att dölja elementet.
angular.module(...) skapar en ny modul.
.controller(...) Angular Controller och returnerar modulen för kedja;
ng-controller direktivet är en viktig aspekt av hur vinkel stöder principerna bakom modell-View-Controller designmönster.
ng-show direktivet visar det givna HTML-elementet om uttrycket som tillhandahålls är sant.
ng-hide direktivet döljer det givna HTML-elementet om uttrycket som anges är sant.
ng-click direktivet avfyrar en växelfunktion inuti styrenheten

Modified text is an extract of the original Stack Overflow Documentation

Licensierat under CC BY-SA 3.0

Inte anslutet till Stack Overflow

AngularJS
Användning av inbyggda direktiv

Sök…

Dölj / Visa HTML-element