1

Estou com um problema na minha aplicação.

Quando uso o ng-repeat do angularJS para criar uma tabela, e nessa tabela existe um input, e nesse campo input, vem preenchido com um valor.

Tem também um botão SALVAR, onde ele pega o valor do INPUT e manda como parâmetro.

Aí que está o problema. Se eu não clicar no Input para depois clicar no salvar, ele não envia nenhum valor.

Alguém tem uma idéia ?

HTML

<body ng-app='app-pedido'>
  <div ng-controller='ctl-pedido'>
    <table class='table table-bordered table-striped'>
      <thead>
        <tr>
          <th>Código</th>
          <th>Descrição</th>
          <th>Quantidade</th>
          <th>&nbsp;</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat='ax in itens'>
          <td>{{ax.codigo}}</td>
          <td>{{ax.descricao}}</td>
          <td><input class='form-control' type='number' ng-model='txtQuantidade' ng-value='ax.quantidade'></td>
          <td><button ng-click='Salvar(ax.codigo, txtQuantidade)' type='button' class='btn btn-primary btn-block'>Salvar</button></td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

JAVASCRIPT

angular.module('app-pedido', [])

.controller('ctl-pedido', function($scope, $http) {

  $scope.itens = [{
    codigo: '00002305',
    descricao: 'Módulo de Memória',
    quantidade: '10.00'
  }];

  $scope.Salvar = function(codigo, quantidade) {

  alert('O código do produto é ' + codigo + ' e a quantidade é ' + quantidade);

  };

});

Veja aqui o exemplo no jsfiddle.

9
  • Você está usando um form com post ou está enviado os dados via json?
    – adelmo00
    22/04/2016 às 19:28
  • Enviando os dados via JSON. O problema é exatamente o que está acontecendo no jsfiddle. O Valor só é passado no parâmetro caso eu "entre" no input. Aí Funciona. 22/04/2016 às 20:01
  • Troque o tipo do input para text, retirei o ng-value, coloquei o ng-model referenciando a quantidade que está no ax: jsfiddle.net/1v0v5ns2/13
    – adelmo00
    22/04/2016 às 20:09
  • Perfeito! Você saberia explicar o por que o type number não funciona? 22/04/2016 às 20:12
  • Vou pesquisar e coloco como resposta. Tem um mais detalhe, você pode editar a quantidade, e passar a lista toda como json que o angular passa os valores atualizados. Eu tenho uma lista parecida em um sistema, onde o usuário pode editar a quantidade de vários itens.
    – adelmo00
    22/04/2016 às 20:14

4 Respostas 4

1

No input da quantidade você precisa passar

ax.quantidade no ng-model

<input class='form-control' type='number' ng-model='ax.quantidade' ng-value='ax.quantidade'>

e na função click você tem que passar ax.quantidade, que no caso é o valor do objeto que esta sendo executado e gerado no for naquele momento.

<button ng-click='Salvar(ax.codigo, ax.quantidade)' type='button' class='btn btn-primary btn-block'>Salvar</button>

Da forma que esta feito você esta passando uma variavel txtQuantidade que não é inicializada com nenhum valor.

Veja seu exemplo funcionando.

https://jsfiddle.net/boLsq2ua/1/

0

Existe um problema com bind do Angular, quando o tipo do input é number. Pelo que pesquisei não existe uma resposta exata para o por que do problema.

Você pode contornar isso mudando o tipo do input para text, que foi o que eu fiz. O Exemplo está aqui: fiddle ou você pode criar uma diretiva para fazer o parse do número para int ou float conforme essa resposta https://stackoverflow.com/questions/17395188/angular-validate-input-type-number

Tem uma thread de discussão desse assunto em um fórum do Angular: https://groups.google.com/forum/#!msg/angular/Ecjx2fo8Qvk/x6iNlZrO_mwJ

0
0

O problema é que você está utilizando o ng-model para um valor temporário, quando na realidade deveria ser a propriedade que deve espelhar o valor do input:

angular
  .module('app-pedido', [])
  .controller('ctl-pedido', function($scope, $http) {

    $scope.itens = [{
      codigo: '00002305',
      descricao: 'Módulo de Memória',
      quantidade: '10.00'
    }];

    $scope.Salvar = function(item) {
      alert('O código do produto é ' + item.codigo + ' e a quantidade é ' + item.quantidade);
    };
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app='app-pedido'>
  <div ng-controller='ctl-pedido'>
    <table class='table table-bordered table-striped'>
      <thead>
        <tr>
          <th>Código</th>
          <th>Descrição</th>
          <th>Quantidade</th>
          <th>&nbsp;</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat='ax in itens'>
          <td>{{ax.codigo}}</td>
          <td>{{ax.descricao}}</td>
          <td>{{ax.quantidade}}</td>
          <td><input class='form-control' type='number' ng-model='ax.quantidade'></td>
          <td><button ng-click='Salvar(ax)' type='button' class='btn btn-primary btn-block'>Salvar</button></td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

-1

Não precisa trocar o tipo do seu input. Troque o seu código de:

<tr ng-repeat='ax in itens'>

para:

<tr ng-repeat='ax in itens' ng-init="txtQuantidade= ax.quantidade">
0

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 .