4

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>
<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>Lista de tarefas!</h2>
    <div ng-controller="TodoListController as todoList">
      <span>{{todoList.remaining()}} não cumprida de {{todoList.todos.length}} tarefas!</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!">
        <input class="btn-primary" type="submit" value="Adicionar">
      </form>
    </div>
    </br>
    <a class="but" href="cumpridas.html">Ir para pagina de tarefas cumpridas!»</a>
  </body>
</html>

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

1
  • Alguma resposta ajudou a resolver o problema e pode sanar dúvidas similares de outros usuários? Caso positivo não esqueça de marcar a resposta como aceita. Pra fazer isso é só clicar no ✓ do lado esquerdo da mesma (abaixo do indicador de up e down votes).
    – Sorack
    Commented 20/03/2019 às 13:31

1 Resposta 1

1

Você pode utilizar um service para passar os dados de um controller para o outro.

angular
  .module('todoApp')
  .factory('todoService', todoService);

todoService.$inject = [];

function todoService(){
  var service = {
    adicionar: adicionar,
    lista: []
  };

  function adicionar(tarefa){
    service.lista.push(tarefa);
  };

  return service;
});

No primeiro controller você pode adicionar a tarefa cumprida com a função adicionar:

todoService.adicionar(tarefa);

No segundo controller você consegue acessar a propriedade lista do service:

todoService.lista;

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .