OBS: Até entendi o tudo, o problema é que não consigo fazer com esse código as informações que me passaram, tipo nada. E quando faço não funciona. Alguém pode me ajudar por favor??
Olá, eu estou com um sério problema em entender como funcionam esssas coisas citadas em um texto. Gostaria de criar uma .directive, fazer a modularizarão fazendo parte do código ser utilizada em serviços e efetuar a divisão de camadas nesse código. Estou começando agora a aprender então estou tendo muita dificuldade nessa parte do processo de criação Angular.
angular.module('TarefApp', []);
// Code goes here
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) {
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%;
}
.apgfiltro {
margin-top: 5%;
margin-bottom: 2.9%;
}
a:hover {
text-decoration: none !important;
}
.done-true {
text-decoration: line-through;
color: #ccc;
}
.col-xs-9.edit {
margin-top: 3%;
}
<html lang="pt-br" ng-app="TarefApp">
<head>
<!-- Angular.js minificado -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Angular.js minificado -->
<script src="js/app.js"></script>
<script src="js/controller/TarefasController.js"></script>
<!-- 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>
</head>
<body>
<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>
<!-- Categorias + Tarefas -->
<div class="col-xs-9 edit">
<button class="btn btn-danger btn-block" 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>
</body>
</html>