Jsangular Multiple ng-repeat

Question

I’m having a hard time creating a loop with ng-repeat, at the angle. Next... I wanted to create tags for each projeto that I add, example:

See that it is possible add more tags and there is also, in the end, a text, which when clicked adds a new project, called Add Projeto, being like this:

THE PROBLEM: When I type a text for the tag projeto1 is inscribed at the same time under the tag of projeto2! I imagine this is on account of {{tag.taagscliente}}, that is being the same for each project. How I make this loop, without this conflict, I say, separate tags for each project? Project code below:

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


});

Answer 1

You can define a collection of tags for each project. Something like this:

<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>

And the angular js code:

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.