Angularjs - NG-Click to repeat HTML block

Asked

Viewed 418 times

0

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

the buttons: (There are 3 buttons, one for text, a video, another for image, I copied only one to be 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"), then just record the first block. I am sending to a Mongodb Bank and thought of converting the data in the POST to JSON, hand did not work.

help me Please! :)

angularjs

  • @Souzaxavier I believe you will have to send this data in a collection of "texts".

  • @Fabiosilvalima in what way? Because it is already being saved a collection. But with feathers an item.

  • Too bad now I can’t help you, tomorrow I see this parade

  • As I understand it, Voce needs to add an index example: ng-model="item.text[$index]" This index should be added at each click. So in the click add it should scroll through the text list.

  • I will try to implement this index. Thank you! @Juniorporpirio

1 answer

1

Dude, you need to send a string array to your backend, I don’t know what you’re backend, but I believe the form below solves 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);
  };
};

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

Browser other questions tagged angularjs

You are not signed in. Login or sign up in order to post.