AngularJS tiene sus propias directivas de eventos HTML.

La Directiva ng-click

La directiva ng-click define un evento click de AnguarJS. Ejemplo:
<div ng-app="" ng-controller="miController">

<button ng-click="count = count + 1">Haz click!</button>

<p>{{ count }}</p>

</div>

Ocultando elementos HTML

La directiva ng-show define la visibilidad de una aplicación.
  • El valor ng-show="true" (valor booleano) hace que el elemento sea visible.
  • El valor ng-show="false" (valor booleano) hace que el elemento sea invisible.
Ejemplo:
<div ng-app="" ng-controller="cocheController">

<button ng-click="mostrarocultar()">Mostrar/Ocultar</button>

<p id="coche" ng-show="mivariable">
Marca: <input type="text" ng-model="coche.marca"><br>
Modelo: <input type="text" ng-model="coche.modelo"><br>
<br>
El Coche es un {{coche.marca+ " " + coche.modelo}}
</p>

</div>

<script>
function cocheController($scope) {
    $scope.coche= {
        marca: "Audi",
        modelo: "A5"
    };
    $scope.mivariable= true;
    $scope.mostrarocultar= function() {
        $scope.mivariable= !$scope.mivariable;
    };
}
</script>
Explicación de la Aplicación: La aplicación tiene una nueva propieda por defecto mivariable : $scope.mivariable= true; La directiva ng-show usa la variable mivariable que tendrá un valor booleano: true o false . La función mostrarocultar() cambiará los valores de mivariable entre true o false . De esta manera mostraremos u ocultaremos el elemento párrafo p con id coche .

Recuerta que debes suscribirte en este enlace para estar al día. También puedes pasar por el catálogo de cursos de Openwebinars.net.


Ver Indice Tutorial