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 | Frameworks
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

Relacionado

Te dejamos una selección de cursos, carreras y artículos

Razones para aprender AngularJS

Razones para aprender AngularJS

Frameworks

10 de Marzo de 2015

En OpenWebinars.net tenemos un Curso Online con Clases en Directo de AngularJS y Typescript, donde aprenderás como un frontend profesional a desarrollar tus aplicaciones web con JavaScript.

Tests unitarios en AngularJS

Tests unitarios en AngularJS

Frameworks

18 de Octubre de 2018

Te enseñamos de forma práctica qué son los test unitarios, su importancia y cómo realizarlos para comprobar que el código funciona correctamente.

Curso de Angular JS 1.3 y TypeScript

Curso de Angular JS 1.3 y TypeScript

curso

Consigue ser un experto desarrollador de Aplicaciones Web con AngujarJs 1.6 el framework javascript de Google en su versión más usada.

Duración: 16 horas y 25 minutos

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