Move task - AngularJS

Question

Move task - AngularJS

Navigation

#1 by (1 votes)
#2 by (1 votes)

0

Hello, could someone explain to me how I can when I check the "Incomplete" activity checkbox to be sent to the "Completed" activity list?

angular.module('TarefApp', []);

// Code goes here
angular.module('TarefApp')

.controller('TarefasController', function($scope) {

  $scope.tarefas = [];

  $scope.addTarefa = function(tarefa) {
    tarefa.selecionado = false;
    $scope.tarefas.push(angular.copy(tarefa));
    delete $scope.tarefa;
  };

  $scope.delTarefas = function() {
    var oldTarefas = $scope.tarefas;
    $scope.tarefas = [];
    angular.forEach(oldTarefas, function(tar) {
      if (!tar.selecionado) $scope.tarefas.push(tar);
    });
  };

});

<!DOCTYPE html>
<html lang="pt-br" ng-app="TarefApp">

<head>
  <meta charset="utf-8" />
  <title>Teste de Performance 4</title>
  <!-- Bootstrap -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script><!--Angular.jsminificado--><scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>

  <!-- Angular.js minificado  -->
  <script src="app.js"></script>
  <script src="teste.js"></script>

  <!-- CSS  -->
  <style type="text/css">
    .done-true {
      text-decoration: line-through;
    }
  </style>

</head>

<body>
  <div id="div-container" class="container" ng-controller="TarefasController">
    <div class="page-header">
      <h4>Adicionar Tarefa</h4>
    </div>
    <div id="div-form">
      <form role="form">
        <div class="form-group">
          <input type="text" class="form-control" ng-model="tarefa.nome">
        </div>
        <button class="btn btn-info btn-block" ng-click="addTarefa(tarefa)" ng-model="infoIgual" ng-disabled="!tarefa.nome">Adicionar</button>
      </form>
    </div>
    <div class="page-header">
      <h4>Tarefas Incompletas</h4>
    </div>
    <div ng-repeat="tarefa in tarefas">
      <input type="checkbox" ng-model="tarefa.selecionado">
      <span class="done-{{tarefa.selecionado}}">{{tarefa.nome}}</span>
    </div>
    
    <div class="page-header">
      <h4>Tarefas Completas</h4>
    </div>
    <div>
      
    </div>
    </br>
    <button class="btn btn-danger" ng-click="delTarefas()">Apagar selecionados</button>
  </div>
</body>

</html>

javascript angularjs

asked by anonymous 02.09.2015 / 04:28

2 answers

1

I've changed 3 segments of your code.

Segment 1

<div ng-repeat="tarefa in tarefas | filter: {selecionado: false}">

I've added a filter in your original% of% to only display the tasks where the value of ng-repeat is false.

Segment 2

<div ng-repeat="tarefa in tarefas | filter: {selecionado: true}">
  <input type="checkbox" ng-model="tarefa.marcaExclusao">
  <span>{{tarefa.nome}}</span>
</div>

I added a selecionado in the full task area, which shows all of them with the ng-repeat q property equal to true.

I also changed the selecionado mapped to the checkbox, preparing for deletion.

Segment 3

if (!tar.marcaExclusao) $scope.tarefas.push(tar);

I changed ng-model to delete elements content the new Boolean value.

The complete result follows below:

angular.module('TarefApp', []);

// Code goes here
angular.module('TarefApp')

.controller('TarefasController', function($scope) {

  $scope.tarefas = [];

  $scope.addTarefa = function(tarefa) {
    tarefa.selecionado = false;
    $scope.tarefas.push(angular.copy(tarefa));
    delete $scope.tarefa;
  };

  $scope.delTarefas = function() {
    var oldTarefas = $scope.tarefas;
    $scope.tarefas = [];
    angular.forEach(oldTarefas, function(tar) {
      if (!tar.marcaExclusao) $scope.tarefas.push(tar);
    });
  };

});

<!DOCTYPE html>
<html lang="pt-br" ng-app="TarefApp">

<head>
  <meta charset="utf-8" />
  <title>Teste de Performance 4</title>
  <!-- Bootstrap -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script><!--Angular.jsminificado--><scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>

  <!-- Angular.js minificado  -->
  <script src="app.js"></script>
  <script src="teste.js"></script>

  <!-- CSS  -->
  <style type="text/css">
    .done-true {
      text-decoration: line-through;
    }
  </style>

</head>

<body>
  <div id="div-container" class="container" ng-controller="TarefasController">
    <div class="page-header">
      <h4>Adicionar Tarefa</h4>
    </div>
    <div id="div-form">
      <form role="form">
        <div class="form-group">
          <input type="text" class="form-control" ng-model="tarefa.nome">
        </div>
        <button class="btn btn-info btn-block" ng-click="addTarefa(tarefa)" ng-model="infoIgual" ng-disabled="!tarefa.nome">Adicionar</button>
      </form>
    </div>
    <div class="page-header">
      <h4>Tarefas Incompletas</h4>
    </div>
    <div ng-repeat="tarefa in tarefas | filter: {selecionado: false}">
      <input type="checkbox" ng-model="tarefa.selecionado">
      <span class="done-{{tarefa.selecionado}}">{{tarefa.nome}}</span>
    </div>
    
    <div class="page-header">
      <h4>Tarefas Completas</h4>
    </div>
    <div ng-repeat="tarefa in tarefas | filter: {selecionado: true}">
      <input type="checkbox" ng-model="tarefa.marcaExclusao">
      <span>{{tarefa.nome}}</span>
    </div>
    <div>
      
    </div>
    </br>
    <button class="btn btn-danger" ng-click="delTarefas()">Apagar selecionados</button>
  </div>
</body>

</html>

02.09.2015 / 20:58

Problem with Ajax request in JavaScript Cancel AsyncTask when choosing another menu item with Navigation Drawer

score 1 · Accepted Answer

Taking advantage of your own delete code to implement something similar to what you want to do:

angular.module('TarefApp', []);

// Code goes here
angular.module('TarefApp')

  .controller('TarefasController', function($scope) {

    $scope.tarefas = [];
    $scope.tarefasFeita = [];

    $scope.addTarefa = function(tarefa) {
      tarefa.selecionado = false;
      for(var i=0; i < $scope.tarefas.length; i++){
        if($scope.tarefas[i].nome === tarefa.nome){
          alert("Tarefa já existe!");
          return;
        }
      }
      for(var i=0; i < $scope.tarefasFeita.length; i++){
        if($scope.tarefasFeita[i].nome === tarefa.nome){
          alert("Tarefa já existe!");
          return;
        }
      }
      $scope.tarefas.push(angular.copy(tarefa));
      
      delete $scope.tarefa;
    };
  
    $scope.tarefaFeita = function() {
       var oldTarefas = $scope.tarefas;
       $scope.tarefas = [];
       angular.forEach(oldTarefas, function(tar) {
         if (!tar.selecionado){
           $scope.tarefas.push(tar);
         }else{
           $scope.tarefasFeita.push(tar);
         }
         ;
       });
    };
    
    $scope.delTarefas = function() {
       var oldTarefas = $scope.tarefas;
       $scope.tarefas = [];
       angular.forEach(oldTarefas, function(tar) {
         if (!tar.selecionado) $scope.tarefas.push(tar);
       });
     };

  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><!DOCTYPEhtml><htmllang="pt-br" ng-app="TarefApp">
  <head>
    <meta charset="utf-8" />
    <title>Teste de Performance 4</title>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script><!--Angular.jsminificado--><scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>   


    <!-- CSS  -->
    <style type="text/css">
      .done-true{
        text-decoration: line-through;
      }
    </style>

  </head>
  <body>
    <div id="div-container" class="container" ng-controller="TarefasController">
      <div class="page-header">
        <h4>Adicionar Tarefa</h4>
      </div>
      <div id="div-form">
        <form role="form">
          <div class="form-group">
            <input type="text" class="form-control" 
                   ng-model="tarefa.nome">
          </div>
          <button class="btn btn-info btn-block"
                  ng-click="addTarefa(tarefa)" ng-model="infoIgual" 
                  ng-disabled="!tarefa.nome">Adicionar</button>
        </form>
      </div>
      <div class="page-header">
        <h4>Tarefas Incompletas</h4>
      </div>
      <div ng-repeat="tarefa in tarefas">
        <input type="checkbox" ng-model="tarefa.selecionado" ng-click="tarefaFeita()">
        <span class="done-{{tarefa.selecionado}}">{{tarefa.nome}}</span>
      </div>

      <div class="page-header">
        <h4>Tarefas Completas</h4>
      </div>
      <div ng-repeat="tarefaFeita in tarefasFeita">
        <span>{{tarefaFeita.nome}}</span>
      </div>
      </br>
    <button class="btn btn-danger" ng-click="delTarefas()">Apagar selecionados</button>
    </div>
  </body>
</html>

Explanation of the code:

$scope.tarefaFeita = function(tarefa){
  //criação de uma var auxiliar que ira receber o array de tarefas da primeira lista
  varoldTarefas = $scope.tarefas;
  //limpa o array original
  $scope.tarefas = [];
  //enquanto houver elementos na variável oldtarefas, executa a função passando o próprio elemento como parâmetro
  angular.forEach(oldTarefas,function(tar){
    //se o elemento nao estiver selecionado ele adiciona o elemento antigo de novo no array de tarefas
    if(!tar.selecionado){
      $scope.tarefas.push(tar);
    //senão ele adiciona o elemento antigo no novo array de tarefasFeitas
    }else{
      $scope.tarefasFeita.push(tar);
    };
  });
};

In the HTML part, simply increment the following:

<div ng-repeat="tarefaFeita in tarefasFeita">
  <span>{{tarefaFeita.nome}}</span>
</div>

And in fields with checkbox add: <input type="checkbox" ng-model="tarefa.selecionado" ng-click="tarefaFeita()">

For convenience, I've also added a feature in addTarefas , if the element is in both a list and another, it blocks the addition of the element:

    $scope.addTarefa = function(tarefa) {

      .
      .
      .

      for(var i=0; i < $scope.tarefasFeita.length; i++){
        if($scope.tarefasFeita[i].nome === tarefa.nome){
          alert("Tarefa já existe!");
          return;
        }
      }

      .
      .
      .

    };