Skip to main content
Formatação do HTML
Fonte Link
Sorack
  • 26,5mil
  • 6
  • 43
  • 96

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

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

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>
Bumped by Community user
Bumped by Community user
Bumped by Community user
Bumped by Community user
Bumped by Community user
Bumped by Community user
Bumped by Community user
Bumped by Community user
Fonte Link

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.