Unable to repeat when adding new item to a list

Question

Unable to repeat when adding new item to a list

Navigation

#1 by (2 votes)

0

Hello, I would like your help. I'm creating a page with AngularJS to add tasks to a list. And I wish she would not repeat it, but unfortunately I can not do or find explanatory codes on the internet. Here is 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.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 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

asked by anonymous 02.09.2015 / 03:33

1 answer

HttpSession java Permissions system

score 2 · Accepted Answer

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

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

Here's an 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><!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 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>