AngularJS - NG-Click to repeat block of HTML

Question

AngularJS - NG-Click to repeat block of HTML

Navigation

#1 by (1 votes)

0

I am developing a "dynamic" form, where users choose the sequence, quantity, and which fields they will fill. Then I used ng-click to repeat the form's HTML code as follows:

The buttons: (There are 3 buttons, one for text, one video, another for the image, I copied only one to get cleaner.)

<div class="col-md-12 bloco_botoes" ng-controller="InformacoesObraController">                
     <a class="btn btn-default btn-lg" ng-model="item.texto" ng-click="adicionaTexto()">
         Adicionar<br>TEXTO
     </a>
</div>

My Controller:

function InformacoesObraController($scope) {
     $scope.textos = [];

     $scope.adicionaTexto = function() {
         var elTexto = angular.element(
             '<div class="input-group"><input id="nome_obra" name="texto" class="form-control" type="text-area" required=""></div>'
         );
         angular.element(document.querySelector('#forms-element')).append(elTexto);
     };
};

Location where the HTML block is inserted:

<div class="col-md-12">
    <br><br><div id="forms-element"></div>               
  </div>

The Problem:

When I send the information to the Bank I have problem because all fields have the least name ( name="text" ), so it only writes the first block. I am sending to a MongoDB Bank and I thought of converting the data into POST for JSON, hand did not work.

help me please! :)

angularjs

asked by anonymous 12.01.2017 / 04:04

1 answer

How to change getRealPath () save location? Photocam primefaces Java: Send message on the network repeatedly in another thread?

score 1 · Answer 1

Dude, you need to send an array of string to your backEnd, I do not know what you're backEnd, but I believe the form below will solve your problem

function InformacoesObraController($scope) {

 $scope.countTexto = 0;

 $scope.textos = [];

 $scope.adicionaTexto = function() {
     var elTexto = angular.element(
         '<div class="input-group"><input id="nome_obra" name="texto["' + ($scope.countTexto++) + ']"  class="form-control" type="text-area" required=""></div>'
     );
     angular.element(document.querySelector('#forms-element')).append(elTexto);
  };
};

In this way we use the countText counter to create an array of strings