How to make a list of categories with a task counter fulfilled and not fulfilled?

Question

How to make a list of categories with a task counter fulfilled and not fulfilled?

Navigation

#1 by (1 votes)

4

Good evening, I'm like a doubt, I'm trying to do a dynamic task counter, that completed tasks should be presented on another page.

I have the following HTML of tasks fulfilled:

<!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><scriptsrc="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);
      });
    };
  }); '

Task List HTML:

<!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><scriptsrc="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 clicked on "Finish" he would play the completed task to another page.

javascript html angularjs

asked by anonymous 21.12.2016 / 02:40

1 answer

C # - Problems reading data from an XML returned from a site Assign a function to JComboBox

score 1 · Answer 1

You can use service to pass data from one controller to another.

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 adicionar function:

todoService.adicionar(tarefa);

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

todoService.lista;