Problems with Input AngularJS

Question

Problems with Input AngularJS

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (0 votes)
#4 by (-1 votes)

1

I have a problem with my application.

When I use ng-repeat of angularJS to create a table, and in that table there is input , and in that field input , it is filled with a value.

It also has a SAVE button, where it takes the value of INPUT and sends it as a parameter.

So that's the problem. If I do not click on Input to then click save, it does not send any value.

Does anyone have an idea?

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);

  };

});

See the here example in jsfiddle >.

javascript html angularjs

asked by anonymous 22.04.2016 / 21:23

4 answers

Rendering the contents of an array How to subtract two dates using Ruby and the Time library?

score 1 · Answer 1

In quantity input you need to pass

ax.quantity in ng-model

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

and in the click function you have to pass x.quantity, which in case is the value of the object that is being executed and generated in the for that moment.

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

As you are done you are passing a variable txtQuantity that is not initialized with no value.

See your example working.

link

score 0 · Answer 2

There is a problem with Angular bind, when the type of input is number . For what I researched, there is no exact answer to why the problem.

You can work around this by changing the type from input to text , which is what I did. The example is here: fiddle or you can create a directive to parse the number to int or float by that answer link

There is a discussion thread for this subject in an Angular forum: link

score 0 · Answer 3

The problem is that you are using ng-model for a temporary value, whereas in reality it should be the property that should mirror the value of 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>

score -1 · Answer 4

-1

You do not need to change the type of your input. Change your code for:

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

To:

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

24.04.2016 / 18:43