Entrada de datos

Por ahora hemos visto como generar información desde JavaScript y mostrarla en la página HTML, en este tema vamos a ver como usando el tag <input> podemos pasar la información desde el HTML a las variables de JavaScript. Es decir vamos a modificar la variable mensaje del $scope desde la propia página HTML mediante el tat <input>.

El ejemplo ahora quedaría así:

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body ng-controller="PruebaController">
    <h1>{{mensaje}}</h1>
    <button ng-click="cambiarMensaje()">Cambio</button>
    <br>
    Mensaje:<input ng-model="mensaje" >
    
  </body>

</html>

Linea 13: Lo único que hemos añadido es un <input> pero con la directiva de angular ng-model. Esta directiva indica que variable del $scope está asociado a este <input>. Si ejecutas el ejemplo verás como al escribir texto en el <input> automáticamente se modifica el texto del título <h1> en la página HTML. También prueba a pulsar en el botón “Cambia” y mira lo que ocurre.

var app=angular.module("app",[]);
 
function PruebaController($scope) {
  $scope.mensaje="Hola Mundo";
  
  $scope.cambiarMensaje=function() {
    $scope.mensaje="Adios mundo cruel :-)";
  }
  
}

El fichero script.js no lo hemos modificado nada.

Ejemplo

Referencias

ngClick

unidades/02_angular/03_input.1404457506.txt.gz · Última modificación: 2014/07/04 09:05 por admin

Ir hasta arriba