Created
June 23, 2014 01:35
-
-
Save appforest/799cbdb01702a91224d3 to your computer and use it in GitHub Desktop.
Lista de Cosas Por Hacer - Tutorial - Parte 2
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE HTML> | |
<html lang="en" ng-app="cosasPorHacer"> | |
<body ng-controller="cosasPorHacer_Ctrl"> | |
<!-- ng-submit se dispara cuando el formulario se envía (bien sea por el accionar de la tecla Enter o por clic sobre el botón "Enviar"); ejecutará "agregarElemento" es el nombre de la función que inserta elementos en el array "$scope.listaDeCosas". --> | |
<form ng-submit="agregarElemento()"> | |
<!-- La propiedad ' ng-model="cosaPorHacer" ' del input hace que Angular pueda tomar su valor desde el controlador. Angular se debe referir a este modelo usando "$scope.cosaPorHacer" --> | |
<input type="text" ng-model="cosaPorHacer" placeholder="Agregar nueva cosa por hacer"> | |
<input type="submit"> | |
</form> | |
<ul> | |
<!-- ng-repeat se encarga de crear un elemento por cada uno de los items que encuentre en la lista especificada, en este caso "listaDeCosas" (en la vista no es necesario poner el $scope. antes del nombre de la variable). --> | |
<!-- "cosa" es el nombre que le doy a cada uno de los elementos que ng-repeat genera, por lo tanto puedo acceder a él en la vista usando "mustaches" así: {{cosa}}, de esta forma indico que quiero que se muestre todo item del array. --> | |
<li ng-repeat="cosa in listaDeCosas track by $index">{{cosa}}</li> | |
</ul> | |
<!-- Recuerda usar la librería más reciente disponible (al menos mientras llegue una nueva versión de angular que cambie todo) --> | |
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script> | |
<script> | |
// Declaramos la apliacaión con el nombre 'cosasPorHacer' con un array vacío '[]' y la asociamos a la variable 'aplicacion' | |
var aplicacion = angular.module('cosasPorHacer', []); | |
// Creamos un controlador, para este caso lo llamaremos cosasPorHacer_Ctrl y le inyectaremos '$scope' como dependencia. $scope sirve de puente entre lo que se defina en el controlador y la/s vista/s (HTML) *Explicación breve y poco técnica | |
aplicacion.controller('cosasPorHacer_Ctrl', function($scope){ | |
// Definimos el Array que contendrá los elementos de nuestra lista de cosas por hacer | |
$scope.listaDeCosas = []; | |
// Creamos una función que se encargará de agregar elementos a la lista | |
$scope.agregarElemento = function(){ | |
// Un push como cualquier otro en JS en donde $scope.cosaPorHacer es el input del formulario | |
$scope.listaDeCosas.push($scope.cosaPorHacer) | |
// Borramos el texto ingresado en el input del formulario para dejarlo listo para recibir una nueva Cosa Por Hacer | |
$scope.cosaPorHacer = "" | |
} | |
}) | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment