How to make a list of categories with a completed and unfulfilled task counter?

Asked

Viewed 697 times

4

Good evening, I’m as a doubt, I’m trying to make a dynamic task counter, that the tasks accomplished should be presented on another page.

I have the following HTML of completed tasks:

<!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>

The following 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 of task list:

<!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>

I would like to know how to do so that when I click on "finish" it plays the task completed to another page.

javascript html angularjs

  • Has any response helped solve the problem and can address similar questions from other users? If so, make sure to mark the answer as accepted. To do this just click on the left side of it (below the indicator of up and down votes).

1 answer

1

You can use a service to pass the data of a controller to the other.

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

todoService.$inject = [];

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

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

  return service;
});

In the first controller you can add the completed task with the function adicionar:

todoService.adicionar(tarefa);

In the second controller you can access the property lista of service:

todoService.lista;

Browser other questions tagged javascript html angularjs

You are not signed in. Login or sign up in order to post.