JSAngular Multiple ng-repeat

Navigation
2

I'm having a hard time creating a loop with ng-repeat , no angle. Next ... I wanted to create tags for every projeto I add, eg:

Seethatyoucanaddmoretagsandthereisalsoatextattheendthataddsanewproject,calledAddProjeto,totheclicked

THE PROBLEM : When I type a text for the projeto1 tag it is inscribed at the same time in the projeto2 tag! I guess this is because of {{tag.taagscliente}} , which is the same for each project. How do I make this loop, without there being this conflict, 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><divng-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);
      };


});
    
asked by anonymous 17.03.2015 / 19:47

1 answer

3

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 .

    
17.03.2015 / 21:31
How to use ellipsis with Bootstrap menu? Add values from within a column with postgres