Add to a category

Asked

Viewed 170 times

1

I am unable to make the new tasks added belong to the selected category in select.

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

angular.module('TarefApp')

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

  $scope.tarefas = [];

  $scope.addTarefa = function(tarefa) {
    for(var i=0; i < $scope.tarefas.length; i++){
        if($scope.tarefas[i].nome === tarefa.nome){
          alert("A 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);
    });
  };

  $scope.categorias = [];

  $scope.addCategoria = function(categoria) {
    for(var i=0; i < $scope.categorias.length; i++){
        if($scope.categorias[i].nome === categoria.nome){
          alert("A categoria já existe!");
          return;
        }
      }
    $scope.categorias.push(angular.copy(categoria));
    delete $scope.categoria;
  };
});
.container {
	  	margin-top: 2%;
	  }
<!DOCTYPE html>
<html lang="pt-br" ng-app="TarefApp">
	<head>
	  <meta charset="utf-8" />
	  <!-- 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.2.23/angular.min.js"></script>
	</head>
  	<body>
	    <div id="div-container" class="container" ng-controller="TarefasController" ng-controller="CategoriasController">
		   	<div class="row">
		   		<div class="col-xs-3">
		   			<!-- Ínicio Adicionar Categoria -->
		   			<div class="page-header">
			        	<h4>Adicionar Categoria</h4>
			     	 </div>
			      	<div id="div-form">
		        		<form role="form">
		          			<div class="form-group">
		            			<input type="text" class="form-control" ng-model="categoria.nome">
		          			</div>
		          			<button class="btn btn-info btn-block" ng-click="addCategoria(categoria)" ng-model="infoIgual" ng-disabled="!categoria.nome">Adicionar</button>
		        		</form>
		      		</div>
		      		<!-- Fim Adicionar Categoria -->
		      		<!-- Ínicio Adicionar Tarefa -->
			      	<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">
		            			<br>
								<select class="form-control" id="category">
								    <option ng-repeat="categoria in categorias">{{categoria.nome}}</option>
								</select>
		          			</div>
		          			<button class="btn btn-info btn-block" ng-click="addTarefa(tarefa)" ng-model="infoIgual" ng-disabled="!tarefa.nome">Adicionar</button>
		        		</form>
		      		</div>
		      		<!-- Fim Adicionar Tarefa -->
		        </div>

		        <div class="col-xs-9">
		        	<button class="btn btn-danger" ng-click="delTarefas()">Apagar tarefas selecionadas</button>

					<div ng-repeat="categoria in categorias">
				        <h4 ng-model="categoria.selecionado">{{categoria.nome}}</h4>
				        <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>
			    </div>
			</div>
    	</div>
  	</body>
</html>

javascript angularjs

1 answer

2


I made some adjustments to your source code. First issue you were using a collection of tasks for all categories. That’s why I couldn’t distribute the tasks correctly. 

<div id="div-container" class="container ng-scope" ng-controller="TarefasController">
    <div class="row">
        <div class="col-xs-3">
            <!-- Ínicio Adicionar Categoria -->
            <div class="page-header">
                <h4>Adicionar Categoria</h4>
            </div>
            <div id="div-form">
                <form role="form" class="ng-pristine ng-valid">
                    <div class="form-group">
                        <input type="text" class="form-control ng-pristine ng-valid" ng-model="categoria.nome">
                    </div>
                    <button class="btn btn-info btn-block ng-pristine ng-valid" ng-click="addCategoria(categoria)" ng-model="infoIgual" ng-disabled="!categoria.nome" disabled="disabled">Adicionar</button>
                </form>
            </div>
            <!-- Fim Adicionar Categoria -->
            <!-- Ínicio Adicionar Tarefa -->
            <div class="page-header">
                <h4>Adicionar Tarefa</h4>
            </div>
            <div id="div-form">
                <form role="form" class="ng-pristine ng-valid">
                    <div class="form-group">
                        <input type="text" class="form-control ng-pristine ng-valid" ng-model="tarefa.nome">
                        <br>
                        <select class="form-control" id="category" ng-options="item.nome as item.nome for item in categorias" ng-model="categoriaSelecionada">

                        </select>
                    </div>
                    <button class="btn btn-info btn-block ng-pristine ng-valid" ng-click="addTarefa(tarefa)" ng-model="infoIgual" ng-disabled="!tarefa.nome" disabled="disabled">Adicionar</button>
                </form>
            </div>
            <!-- Fim Adicionar Tarefa -->
        </div>

        <div class="col-xs-9">
            <button class="btn btn-danger" ng-click="delTarefas()">Apagar tarefas selecionadas</button>
            <div ng-repeat="categoria in categorias">
                <h4 ng-model="categoria.selecionado">{{categoria.nome}}</h4>
                <div ng-repeat="tarefa in categoriaTarefa.tarefa[categoria.nome]">
                    <input type="checkbox" ng-model="tarefa.selecionado" ng-click="tarefaFeita()">
                    <span class="done-{{tarefa.selecionado}}">{{tarefa.nome}}</span>
                </div>
            </div>
        </div>
    </div>
</div>

angular.module('TarefApp', []);
angular.module('TarefApp').controller('TarefasController', function($scope) {
    $scope.categorias = [];
    $scope.tarefas = [];
    $scope.categoriaTarefa = {tarefa:{}};

    $scope.addTarefa = function(tarefa) {
        if(!$scope.categoriaSelecionada){
            alert("Selecione uma categoria!!!")
            return;
        }
        var c = $scope.categoriaSelecionada;

        if(!$scope.categoriaTarefa.tarefa[c])
        $scope.categoriaTarefa.tarefa[c] = [];
        else{
            var itemDuplicado = false;
            angular.forEach($scope.categoriaTarefa.tarefa[c], function (item, index){
                itemDuplicado = (item.nome === tarefa.nome);
                if(itemDuplicado){
                    alert("Tarefa para categoria já existe!");
                    return false;
                }
            });
        }

        if(!itemDuplicado){
            $scope.categoriaTarefa.tarefa[c].push(tarefa);
            $scope.tarefa = {};
        }
    };

    $scope.delTarefas = function() {
        angular.forEach($scope.categorias, function(item) {
            var c = item.nome;
            var oldTarefas = $scope.categoriaTarefa.tarefa[c];
            $scope.categoriaTarefa.tarefa[c] = [];

            angular.forEach(oldTarefas, function(tar) {
                if (!tar.selecionado) $scope.categoriaTarefa.tarefa[c].push(tar);
            });
        });
    };

    $scope.addCategoria = function(categoria) {
        angular.forEach($scope.categorias, function(item) {
            if(categoria.nome === item.nome){
                alert("A categoria já existe!");
                return;
            }
        });

        $scope.categorias.push(categoria);
        $scope.categoria = {};
    };
});

Browser other questions tagged javascript angularjs

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