Skip to main content

17 Cursos de Angular JS – Eventos


Tutorial #17 del curso de angular js, en este tutorial nos adentramos a la utilización de eventos estos nos permiten añadir interactividad a nuestras aplicaciones y empezamos viendo los eventos relacionados con el mouse como click, mouseenter y mouseleave.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
  <title>Eventos Angular JS</title>
  <script type="text/javascript" src="angular.min.js"></script>
  <style>
    #cuadrado{ background: red; width: 100px; height: 100px; margin: 30px 10px;}
  </style>
</head>
<body ng-app="eventosApp">

  <div ng-controller="eventosController">
    <button ng-click="saludo()">Click</button>
    <button ng-dblclick="saludo()">Doble Click</button>
    <p ng-click="saludo()">También funciona en párrafos</p>
    <strong>{{conteoClicks}}</strong>

    <div id="cuadrado" ng-mouseenter="dentroDelDiv()" ng-mouseleave="fueraDelDiv()"></div>
    <strong>Estado {{estado}}</strong>
    
  </div>

<script type="text/javascript">
  
  var miApp = angular.module('eventosApp', []);

  miApp.controller('eventosController',function($scope){

    $scope.estado = 'mouse';
    $scope.conteoClicks = 0;
    $scope.saludo = function(){

      $scope.conteoClicks++;
    }
    $scope.dentroDelDiv = function(){

      $scope.estado = 'MouseEnter activo';
    }
    $scope.fueraDelDiv = function(){

      $scope.estado = 'MouseLeave Fuera';
    }

  });

</script>

</body>
</html>

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.