Move task - Angularjs

Asked

Viewed 204 times

0

Hello, could someone explain to me how to do when I check the checkbox of the activity "Incomplete" it be sent to the activity list "Complete"?

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.js minificado  -->
  <script src="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

  • In fact, I was just about to do there in that same answer

  • I thought it best to create a new topic, in case any user has the same difficulty will have an easier access to solving the problem.

2 answers

1

I’ve altered three segments of your code.

Segment 1

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

I added a filter to your ng-repeat original to only display tasks where the value of selecionado 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, in the area of complete tasks, a ng-repeat that shows all with the property selecionado equal to true.

I also changed the ng-model mapped to the checkbox, preparing for deletion.

Segment 3

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

I altered delTarefas to exclude elements content the new boolean value.

The complete result is 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.js minificado  -->
  <script src="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>

1


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>
<!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.js minificado  -->
    <script src="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);
    };
  });
};

On the part of HTML just increase the following:

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

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

For convenience, I’ve also added a feature on addTarefas, if the element exists both in one list and in the other, 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;
        }
      }

      .
      .
      .

    };

Browser other questions tagged javascript angularjs

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