Estou com uma dificuldade para criar um loop's com ng-repeat
, no angular. Seguinte...Eu queria criar tags
para cada projeto
que eu adicionar, exemplo:
Veja que é possível adicionar mais tags e há também, no final, um texto, que ao clicado adciona um novo projeto, chamado Add Projeto
, ficando assim:
O PROBLEMA: Quando eu digito um texto para a tag do projeto1
é inscrito, ao mesmo tempo, na tag do projeto2
! Eu imagino que isso seja por conta do {{tag.taagscliente}}
, que está sendo o mesmo pra cada projeto. Como eu faço esse loop, sem haver esse conflito, digo, separar as tags para cada projeto? Código do projeto abaixo:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<div ng-controller="dash">
<form action="">
<div class="col-3">
<div class="repeat" ng-repeat="projeto in clientes">
<label for="">Pasta Projeto</label>
<input type="text" name="projetos_cliente[]" ng-model="projeto.projetoscliente">
<label for="">Tags</label>
<div class="tags" ng-repeat="tag in taags">
<input type="text" name="tag_cliente[]" ng-model="tag.taagscliente">
<div class="del" ng-click="delTag($index)">-</div>
</div>
<div class="add" ng-click="addTag()">+</div>
</div>
<div class="clearfix"></div>
<div class="addx" ng-click="add()">Add Projeto</div>
</div>
</form>
</div>
ANGULAR:
var app = angular.module('app', ['ngTagsInput']);
app.controller('dash', function($scope, $http){
$scope.clientes = [{'text': 'Digite o projeto'}];
$scope.add = function () {
$scope.clientes.push({
projetoscliente:""
});
};
$scope.del = function (index) {
$scope.clientes.splice(index, 1);
};
$scope.taags = [{'text': 'Digite o projeto'}];
$scope.addTag = function () {
$scope.taags.push({
tagscliente:""
});
};
$scope.delTag = function (index) {
$scope.taags.splice(index, 1);
};
});