AngularJS => Uso de directivas incorporadas.

Ocultar / Mostrar elementos HTML

Este ejemplo oculta mostrar elementos 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 en vivo

Explicación paso a paso:

ng-app="myDemoApp" , la directiva ngApp le dice a angular que un elemento DOM está controlado por un módulo angular específico llamado "myDemoApp".
<script src="[//angular include]"> include angular js.
HideShowController función HideShowController está definida y contiene otra función llamada toggle que ayuda a ocultar mostrar el elemento.
angular.module(...) crea un nuevo módulo.
.controller(...) Controlador angular y devuelve el módulo para el encadenamiento;
ng-controller directiva ng-controller es un aspecto clave de cómo angular admite los principios detrás del patrón de diseño Modelo-Vista-Controlador.
ng-show directiva ng-show muestra el elemento HTML dado si la expresión proporcionada es verdadera.
ng-hide directiva ng-hide oculta el elemento HTML dado si la expresión proporcionada es verdadera.
ng-click directiva ng-click dispara una función de conmutación dentro del controlador

Modified text is an extract of the original Stack Overflow Documentation

Licenciado bajo CC BY-SA 3.0

No afiliado a Stack Overflow

AngularJS
Uso de directivas incorporadas.

Buscar..

Ocultar / Mostrar elementos HTML