Skip to main content
1 de 2

Como fazer uma lista de categorias com um contador de tarefas cumpridas e não cumpridas?

Boa noite, estou como uma duvida, estou tentando fazer um contador de tarefas dinâmico, que as tarefas cumpridas deverão ser apresentadas em outra página.

Estou com o seguinte HTML de tarefas cumpridas:

<!doctype html>
<html ng-app="todoApp">
  <head>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"></script>
    <script src="todo.js"></script>
    <link rel="stylesheet" href="todo.css">
  </head>
  <body>
    <h2>Tarefas cumpridas!</h2>
    <div ng-controller="TodoListController as todoList">
      <span>{{todoList.remaining()}} de {{todoList.todos.length}} tarefas cumpridas!</span>
      [ <a href="" ng-click="todoList.archive()">Concluir!</a> ]
      <ul class="unstyled">
        <li ng-repeat="todo in todoList.todos">
          <label class="checkbox">
            <input type="checkbox" ng-model="todo.done">
            <span class="done-{{todo.done}}">{{todo.text}}</span>
          </label>
        </li>
      </ul>
      <form ng-submit="todoList.addTodo()">
        <input type="text" ng-model="todoList.todoText"  size="30"
               placeholder="Adicionar uma nova tarefa cumprida!">
        <input class="btn-primary" type="submit" value="Adicionar.">
      </form>
    </div>
    </br>
    <a class="but" href="porfazer.html" >Voltar para lista de tarefas!»</a>
  </body>
</html>

O seguinte Js:

angular.module('todoApp', [])
  .controller('TodoListController', function() {
    var todoList = this;
    todoList.todos = [
      ];
 
    todoList.addTodo = function() {
      todoList.todos.push({text:todoList.todoText, done:false});
      todoList.todoText = '';
    };
 
    todoList.remaining = function() {
      var count = 0;
      angular.forEach(todoList.todos, function(todo) {
        count += todo.done ? 0 : 1;
      });
      return count;
    };
 
    todoList.archive = function() {
      var oldTodos = todoList.todos;
      todoList.todos = [];
      angular.forEach(oldTodos, function(todo) {
        if (!todo.done) todoList.todos.push(todo);
      });
    };
  }); `

HTML de lista de tarefas:`<!doctype html>

Lista de tarefas!

{{todoList.remaining()}} não cumprida de {{todoList.todos.length}} tarefas! [ Concluir! ] {{todo.text}} Ir para pagina de tarefas cumpridas!» `

Gostaria de saber como fazer para que quando eu clicasse em "concluir" ele jogasse a tarefa concluida para outra pagina.