Las cookies nos permiten ofrecer nuestros servicios. Al utilizar nuestros servicios, aceptas el uso que hacemos de las cookies. Más Información. Aceptar

Aprender AngularJS fácil: Eventos

Jesús Lucas
  • Escrito por Jesús Lucas el 30 de Julio de 2014
  • <1 min de lectura | Frontend
Aprender AngularJS fácil: Eventos

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

Estas son algunas de las empresas que ya confían en OpenWebinars

Profesores y profesionales

Nuestros docentes son profesionales que trabajan día a día en la materia que imparten

Conviértete en profesor de OpenWebinars