Problems with Input Angularjs

Asked

Viewed 578 times

1

I have a problem with my application.

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

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

That’s the problem. If I don’t click on Input then click on save, it does not send any value.

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

  };

});

Behold here the example in jsfiddle.

javascript html angularjs

  • You are using a form with post or are sent the data via json?

  • Sending data via JSON. The problem is exactly what is happening in jsfiddle. Value is only passed in the parameter if I "enter" the input. There it works.

  • Change the input type to text, I removed ng-value, put ng-model referencing the quantity in Ax: https://jsfiddle.net/1v0v5ns2/13/

  • Perfect! You could explain why type number does not work?

  • I’ll look it up and put it in as an answer. It has a more detail, you can edit the quantity, and pass the whole list as json that the angular passes the updated values. I have a similar list on a system, where the user can edit the amount of multiple items.

  • I’ll try to do it the way you told me. I am beginner with Angularjs, I have a little difficulty, but your idea is in case to change in batch, all items at once. That’s right?

  • No, you can have a lot and want to change only one.

  • @Guilhermecatini the type=number works... if you give it a number: https://jsfiddle.net/1v0v5ns2/21/

  • Was any of the answer helpful? Don’t forget to choose one and mark it so it can be used if someone has a similar question!

Show 4 more comments

4 answers

1

In the 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 Ax.quantity, which in this case is the value of the object being executed and generated in the for at that time.

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

The way this done you are passing a txtQuance variable that is not initialized with any value.

See your example working.

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

0

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

0

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

You can get around this by changing the type of input for text, which is what I did. Example is here: fiddle or you can create a directive to parse the number for int or float as that response https://stackoverflow.com/questions/17395188/angular-validate-input-type-number

Have a thread of discussion of this subject in an Angular forum: https://groups.google.com/forum/#! msg/angular/Ecjx2fo8qvk/x6iNlZrO_mwJ

-1

No need to change the type of your input. Change your code of:

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

for:

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

Browser other questions tagged javascript html angularjs

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