2

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:

inserir a descrição da imagem aqui

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:

inserir a descrição da imagem aqui

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);
      };


});
2

1 Resposta 1

3

Você pode definir uma coleção de tags pra cada projeto. Algo assim:

<div class="container-fluid" ng-app>
  <h2>Projetos</h2>
  <div ng-controller="TagsCtrl">
    <div class="row"  ng-repeat="project in projects">
      <div class="col-sm-12">
          <div class="form-group">
              <label class="control-label">Projeto: 
                  <input class="form-control" ng-model="project.name">
              </label>  {{ project.tags.length }} 
              <input class="form-control" ng-model="tag"> <a ng-click="addTag(project, tag)"> + </a>
              <ul>
                  <li ng-repeat="tag in project.tags">{{ tag }} <a ng-click="delTag(project, $index)"> - </a></li>
              </ul>
          </div>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-12">
          <a ng-click="addProject()" class="btn">Add Projeto</a>
      </div>
    </div>
  </div>
</div>

E o código js angular:

function TagsCtrl($scope) {
  $scope.projects = [
      { name: 'Projeto 1', tags: ['tag1', 'tag2'] },
      { name: 'Projeto 2', tags: [] }
  ];

  $scope.addProject = function() {
      $scope.projects.push({ name: '', tags: [] });
  };

  $scope.addTag = function(project, tag) {
      project.tags.push(tag);
      console.log(project);
  };

    $scope.delTag = function(project, index) {
      project.tags.splice(index, 1);
  };
}

Demo.

1
  • Iuri, meu amigo, tem como implementar um autocompletar com valores predefinidos para o input das tags? Não estou conseguindo nessa versão do angular. Abraço.
    – Lollipop
    18/03/2015 às 12:16

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .