Desarrollo de Aplicaciones Web Con AngularJS y Formularios

Los formularios en AngularJs tiene enlace de datosy validacion de datos de entrada.

  • Controles de entrada

  • Enlace de datos

Los controles de entrada de datos proveen enlace de datos usando la directiva ng-model.

<input type=”text” ng-model=”nombre”>

La Aplicacion tiene ahora una propiedad llamada nombre.

La directiva ng-model enlaza el controlador de la entrada de datos con el resto de la aplicacion web.

La propiedad nombre puede ser usada en el controlador de la siguiente forma:

var app = angular.module(‘myApp’, []);
app.controller(‘formCtrl’, function($scope) {
$scope.nombre = “John”;
});

Y tambien puede usarse en la aplicacion en esta otra forma:

<form>
First Name: <input type=”text” ng-model=”nombre”>
</form>

<h1>Tu escribiste: {{nombre}}</h1>

  • Checkbox

Un checkbox tiene valores true o false. Aplicar la directiva ng-model a un checkbox nos permite hacer uso del valor del modelo.

<form>
Marca check para mostrar la informacion
<input type=”checkbox” ng-model=”mostrar”>
</form>

<h1 ng-show=”mostrar”>
Informacion importante
</h1>

  • Radiobuttons

Para enlazar los radio buttons a tu aplicacion web se necesita añadir la directiva ng-model.

  • Selectbox

Para enlazar las opciones de seleccion con tu app se usa la directiva ng-model.

La propiedad definida en el atributo ng-model tendra el valor de la opcion seleccionada en el selectbox.

<form>
Escoge un Tema
<select ng-model=”tema”>
<option value=””>
</option>
<option value=”perros”>
Perros
</option>
<option value=”gatos”>
Gatos
</option>
<option value=”tortugas”>
Tortugas
</option>
<option value=”sapos”>
Sapos
</option>
</select>
</form>

escrito por christian portilla pauca

 

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s