¡GoConqr estrena diseño! Cuéntanos qué te parece.

Módulo 7 de 7 · Texto

class 7 - Crear un to do list

FREDYS FERNANDEZ

Archivo js

angular.module("ToDoList",["LocalStorageModule"])
.controller("ToDoController", function($scope, localStorageService){
    if (localStorageService.get("angular-todoList")) {
        $scope.todo = localStorageService.get("angular-todoList");
    }else {
        $scope.todo = [];
    }

    $scope.$watchCollection("todo",function(newValue, oldValue){
        localStorageService.set("angular-todoList",$scope.todo);
    })
    
    $scope.AddActividad = function(){
        $scope.todo.push($scope.newActividad);
        $scope.newActividad = {};
    }

    $scope.clearActividad = function(){
        $scope.todo = [];
    }
});

 

Archivo html

<!DOCTYPE html>
<html ng-app="ToDoList">
  <head>
    <meta charset="utf-8">
    <title>Hola controller con Angular JS</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.32/angular.min.js"></script>
    <script src="controller.js"></script>
    <script src="angular-local-storage.min.js"></script>
  </head>
  <body ng-controller="ToDoController">
        <ul>
            <li ng-repeat="Actividad in todo">
                {{Actividad.descripcion}} -
                {{Actividad.fecha | date: 'short'}}            
            </li>
        </ul>
        <form ng-submit="AddActividad()">
            <input type="text" ng-model="newActividad.descripcion">
            <br><br>
            <input type="datetime-local" ng-model="newActividad.fecha">
            <br><br>
            <input type="submit" value="Guardar actividad">
            <button ng-click="clearActividad()">Limpiar</button>
        </form>
  </body>
</html>

Instrucciones

Para avanzar en el curso, envía un intento de este test. Puedes enviarlo después de la última pregunta.

Ir al módulo elegido

Escríbenos

¿Sobre qué es tu mensaje?

¿Qué te parece el nuevo diseño?

¿Te gusta?