AngularJS => Korzystanie z wbudowanych dyrektyw

Ukryj / pokaż elementy HTML

Ten przykład ukryj pokaż elementy 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>

Demo na żywo

Wyjaśnienie krok po kroku:

ng-app="myDemoApp" , dyrektywa ngApp mówi angularowi, że element DOM jest kontrolowany przez określony moduł angular.module o nazwie „myDemoApp”.
<script src="[//angular include]"> include angular js.
Funkcja HideShowController jest zdefiniowana i zawiera inną funkcję o nazwie toggle która pomaga ukryć wyświetlanie elementu.
angular.module(...) tworzy nowy moduł.
.controller(...) Angular Controller i zwraca moduł do łączenia;
Dyrektywa ng-controller jest kluczowym aspektem tego, w jaki sposób kąt wspiera zasady stojące za wzorcem projektowym Model-View-Controller.
Dyrektywa ng-show pokazuje dany element HTML, jeśli podane wyrażenie jest prawdziwe.
Dyrektywa ng-hide ukrywa podany element HTML, jeśli podane wyrażenie jest prawdziwe.
Dyrektywa ng-click uruchamia funkcję przełączania wewnątrz kontrolera

Modified text is an extract of the original Stack Overflow Documentation

Licencjonowany na podstawie CC BY-SA 3.0

Nie związany z Stack Overflow

AngularJS
Korzystanie z wbudowanych dyrektyw

Szukaj…

Ukryj / pokaż elementy HTML