I can not 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.jsminificado--><scriptsrc="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>