miércoles, 3 de septiembre de 2014

AngularJS (10) Formularios

Ya hemos visto algunos formularios en los ejemplos que hemos realizado hasta ahora, de modo que no nos extenderemos mucho en ello, aunque hoy vamos a realizar uno explicando como funciona, veras como es muy muy sencillo.
<body>
<div ng-app="" ng-controller="formController">
  <form novalidate>
    <p>Nombre:
    <input type="text" ng-model="usuario.nombre"></p>
    <p>Apellido:
    <input type="text" ng-model="usuario.apellido">
    </p>
    <button ng-click="reset()">RESET</button>
  </form>
  <p>form = {{usuario }}</p>
  <p>master = {{master}}</p>
</div>

<script>
function formController ($scope) {
    $scope.master = {nombre:"Paco", apellido:"Perez"};
    $scope.reset = function() {
        $scope.usuario = angular.copy($scope.master);
    };
    $scope.reset();
}
</script>

</body>
</html>

  • Como siempre inicializamos la aplicación con ng-app y creamos el controlador con ng-controller.
  • Los datos de los inputs se recogen con la directiva ng-model que los introduce en la propiedad del objeto.
  • El formato del formulario es copiado del master donde van apareciendo las entradas del formulario.
  • Al hacer click en RESET este copia el valor predeterminado en la propiedad master en form introduciendo los valores por defecto.

No hay comentarios:

Publicar un comentario