1

precisei criar um codigo para gerar inputs dinamicamente, abaixo esta o codigo: HTML

<div id="divProdutoBase" style="display:none;">
    Telefone: <input type="text" id="produto[]" name="produto[]" ng-model="telefones" />

    <input type="button" value="Remover" onclick="produtoList.remove(this.parentNode)" />
</div>

<h1>Formulário</h1>
<div id="divProdutoList">
</div>
<input type="button" value="Adicionar Produto" onclick="produtoList.insert()" />

<input type="button" value="fones" ng-click="fones()" />

JS

<script>
// fora do fiddle, você pode trocar a linha abaixo por "var produtoList = {"
var produtoList = {
    'init': function () {
        this.divProdutoList = document.getElementById('divProdutoList');
        this.divProdutoBase = document.getElementById('divProdutoBase');
    },

    'insert': function () {
        var newDiv = this.divProdutoBase.cloneNode(true);
        newDiv.style.display = '';
        console.log('newDiv => ', newDiv);
        this.divProdutoList.appendChild(newDiv);
    },

    'remove': function (el) {
        el.parentNode.removeChild(el);
    }
};
produtoList.init();

esta funcionando tudo certo, minha duvida é como pegar os valores dos inputs, tentei usar o seguinte metodo:

  $scope.fones = function () {
    var fff = document.getElementById('produto[]').value;
    alert(fff);
    alert(JSON.stringify(fff));
}

mas nao funcionou

2
  • Cade o AngularJS ? 8/11/2016 às 17:15
  • Alguma resposta ajudou a resolver o problema e pode sanar dúvidas similares de outros usuários? Caso positivo não esqueça de marcar a resposta como aceita. Pra fazer isso é só clicar no ✓ do lado esquerdo da mesma (abaixo do indicador de up e down votes).
    – Sorack
    20/03/2019 às 13:28

1 Resposta 1

1

Se você está usando angular, como sugere o último trecho de código postado na pergunta, o valor estará na variável utilizada no ng-model. Então ficaria da seguinte forma:

$scope.fones = function () {
  var fff = $scope.telefones;
  alert(fff);
  alert(JSON.stringify(fff));
}

EDIT 1

Da forma abaixo aparentemente o seu código funcionará corretamente:

<!DOCTYPE html>
<html lang="">
  <head>
    <title>Teste</title>
  </head>
  <body id="body">
        Produto: <input type="text" id="produto[]" name="produto[]"/>
        Valor: <input type="text" name="valor[]" />
        <input type="button" value="Remover" onclick="produtoList.remove(this.parentNode)" />
    <form>
        <h1>Formulário</h1>
        <div id="divProdutoList">
        </div>
        <input type="button" value="Adicionar Produto" onclick="produtoList.insert()" />
        <input type="button" value="Testar" onclick="produtoList.teste()" />
    </form>

    <script type="text/javascript">
      produtoList = {
          'init': function()
          {
              this.divProdutoList = document.getElementById('divProdutoList');
              this.divProdutoBase = document.getElementById('divProdutoBase');
          },

          'insert': function()
          {
              var newDiv = this.divProdutoBase.cloneNode(true);
              newDiv.style.display = '';
              console.log('newDiv => ', newDiv);
              this.divProdutoList.appendChild(newDiv);
          },

          'remove': function(el)
          {
              el.parentNode.removeChild(el);
          },
          'teste': function()
          {
            alert(document.getElementById("produto[]").value);
          }
      };
      produtoList.init();
    </script>
  </body>
</html>
9
  • Entao Sorack, na view eu fiz isso {{telefones}}, mas ao preencher o input, nao aparece nada, havia tentando esse metodo q vc disse, mas nao funcionou, axo q o angular nao esta pegando os valores, por isso tentei pegar os valores com JS, mas nao deu. 3/11/2016 às 10:52
  • Você consegue colocar o exemplo completo em um fiddler pra podermos diagnosticar o problema?
    – Sorack
    3/11/2016 às 10:53
  • Sorack, é a primeira vez q posto no fiddler, nao sei como colocar o codigo da controller, entao coloquei junto com o js, me ajude ai por favor:jsfiddle.net/kpgtoe6d 3/11/2016 às 11:10
  • Então, pra postar no fiddler você tem que colocar o conteúdo completo do arquivo. Por exemplo: no html tem que ter os importes e tudo mais, entendeu?
    – Sorack
    3/11/2016 às 11:14
  • entendi, é q eu to usando um tema em angular, e ta uma confusao os imports, mas com o codigo q postei, ja esta gerando os campos. 3/11/2016 às 11:21

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 .