AngularJS => Uso di direttive integrate

Nascondi / Mostra elementi HTML

Questo esempio nasconde gli elementi 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>

Dimostrazione dal vivo

Spiegazione passo passo:

ng-app="myDemoApp" , la direttiva ngApp dice angolare che un elemento DOM è controllato da uno specifico angular.module denominato "myDemoApp".
<script src="[//angular include]"> include js angolare.
HideShowController funzione HideShowController è definita con un'altra funzione chiamata toggle che aiuta a nascondere l'elemento.
angular.module(...) crea un nuovo modulo.
.controller(...) Controller angolare e restituisce il modulo per il concatenamento;
ng-controller direttiva ng-controller è l'aspetto chiave di come angolare supporta i principi alla base del modello di progettazione Model-View-Controller.
ng-show direttiva ng-show mostra l'elemento HTML specificato se l'espressione fornita è vera.
ng-hide direttiva ng-hide nasconde l'elemento HTML specificato se l'espressione fornita è vera.
ng-click direttiva ng-click attiva una funzione di commutazione all'interno del controller

Modified text is an extract of the original Stack Overflow Documentation

Autorizzato sotto CC BY-SA 3.0

Non affiliato con Stack Overflow

AngularJS
Uso di direttive integrate

Ricerca…

Nascondi / Mostra elementi HTML