Cannot repeat when adding new item to a list

Asked

Viewed 144 times

0

Hello, I would like your help. I am creating a page with Angularjs to add tasks to a list. And I wish they wouldn’t repeat it, but unfortunately I’m not able to do it and I can’t find any explanatory codes on the Internet. Here’s the code.

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 Adicionadas</h4>
      </div>
      <div ng-repeat="tarefa in tarefas">
        <input type="checkbox" ng-model="tarefa.selecionado"> 
        <span class="done-{{tarefa.selecionado}}">{{tarefa.nome}}</span>
      </div>
      </br>
      <button class="btn btn-danger" ng-click="delTarefas()">Apagar selecionados</button>
    </div>
  </body>
</html>

javascript angularjs

1 answer

2


Just check inside the object $scope.tarefas if the new tarefa no longer exists, in function addTarefa add:

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

Following example:

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

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

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

    $scope.tarefas = [];

    $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;
        }
      }
      $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);
       });
     };

  });
<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 Adicionadas</h4>
      </div>
      <div ng-repeat="tarefa in tarefas">
        <input type="checkbox" ng-model="tarefa.selecionado"> 
        <span class="done-{{tarefa.selecionado}}">{{tarefa.nome}}</span>
      </div>
      </br>
      <button class="btn btn-danger" ng-click="delTarefas()">Apagar selecionados</button>
    </div>
  </body>
</html>

  • And if I want to divide them into tasks done and not done, I’m trying but she repeats the same thing in both fields.

  • How so @Larissamourullo? You want to create two arrays?

  • Yes. If the "selected task" is true, enter a done list, and if false, enter a done list.

  • In this case your question and a little different from the one initially addressed rs, I will try to create an example here of what you want

  • It is only a doubt that arose amid attempts kk, and yes thank you for example :)

Browser other questions tagged javascript angularjs

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