How to pass dynamically changed value to function, in Angularjs

Question

How to pass dynamically changed value to function, in Angularjs

Asked 7 years, 6 months ago

Viewed 1,936 times

5

The fields itemCodigo, itemDescription, itemPreco and itemQuantidade are filled dynamically (at runtime, without refresh) from a query performed in the database. However, these values, when passed as parameter to the addItem() function, return undefined, that is, when clicking the "Insert" button, the fields that should be "cloned" to the table [Code | Description | Price | Quantity] are empty.

Illustration:

HTML:

<div ng-app="app" ng-controller="controlador">
       <input type="text" name="busca" placeholder="Pesquisar produto"/>
       <br /><br />
       <input type="button" value="Inserir" id="inserir-item"  ng-click="addItem(itemCodigo, itemDescricao, itemPreco, itemQuantidade)"/>
       <br /><br />
       <input type="text" id="codigo" readonly ng-model="itemCodigo">
       <input type="text" id="descricao" readonly ng-model="itemDescricao">
       <input type="text" id="preco" readonly ng-model="itemDescricao">
       <br /><br />

<td>{{item.codigo}}</td>
<td>{{item.descricao}}</td>
<td>{{item.preco}}</td>
<td>{{item.quantidade}}</td>

</div>

Javascript:

var app = angular.module('app', []);

app.controller("controlador", function($scope){
    $scope.addItem = function (itemCodigo, itemDescricao, itemPreco, itemQuantidade) {
              $scope.items.push({
                  codigo: itemCodigo,
                  descricao: itemDescricao,
                  preco: itemPreco,
                  quantidade, itemQuantidade
        });
    };
})

Note: itemQuance, is set in another input within the code.

2

where your $Scope array.items????

– fernandoocf

2016/12/20 at 12:32
$Scope items. = [];

– lucasbento

2016/12/21 at 01:07

3 answers

2

You have to create in your $scope the array of items and to initialize can be used in two ways, one within the controller and another by ng-init assigning the value in a simple expression.

1) Assigning values by ng-init:

var app = angular.module('app', []);

app.controller("controlador", ["$scope",
  function($scope) {
    $scope.items = [];
    $scope.addItem = function(itemCodigo, itemDescricao) {
      $scope.items.push({
        codigo: itemCodigo,
        descricao: itemDescricao
      });
      console.log($scope.items);
    };
  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="controlador">
  <input type="text" name="busca" placeholder="Pesquisar produto" />
  <br />
  <br />
  <input type="button" value="Inserir" id="inserir-item" ng-click="addItem(itemCodigo, itemDescricao)" />
  <br />
  <br />
  <input type="text" id="codigo" name="ttl" ng-init="itemCodigo=1" ng-model="itemCodigo">
  <input type="text" id="descricao" name="ttl" ng-init="itemDescricao = 'ttl'" ng-model="itemDescricao">
  <br />
  <br />
  <td>{{item.codigo}}</td>
  <td>{{item.descricao}}</td>
</div>

2) Assigning the values to itself controller

var app = angular.module('app', []);

app.controller("controlador", ["$scope",
  function($scope) {
    $scope.items = [];
    $scope.itemCodigo = 1;
    $scope.itemDescricao = "desc";
    $scope.addItem = function(itemCodigo, itemDescricao) {
      $scope.items.push({
        codigo: itemCodigo,
        descricao: itemDescricao
      });
      console.log($scope.items);
    };
  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div ng-app="app" ng-controller="controlador">
  <input type="text" name="busca" placeholder="Pesquisar produto" />
  <br />
  <br />
  <input type="button" value="Inserir" id="inserir-item" ng-click="addItem(itemCodigo, itemDescricao)" />
  <br />
  <br />
  <input type="text" id="codigo" name="ttl" ng-model="itemCodigo">
  <input type="text" id="descricao" name="ttl" ng-model="itemDescricao">
  <br />
  <br />
  <td>{{item.codigo}}</td>
  <td>{{item.descricao}}</td>
</div>

_{Particularly, I prefer the second option, because it is easier to identify the variables.}

Reference: ng-init

@@Edit

I understood that need to make a listing with the elements chosen in the query, I will put a minimum example so that fits in the best possible way.

Minimal Example

var app = angular.module('app', []);

app.controller("controlador", ["$scope",
  function($scope) {
    $scope.items = [];
    $scope.itemCodigo = 1;
    $scope.itemDescricao = "desc";
    $scope.addItem = function(s) {
      $scope.items.push({
        codigo: s.codigo,
        descricao: s.descricao,
        preco: s.preco,
        quantidade: s.quantidade
      });
      s.codigo = 0;
      s.descricao = '';
      s.preco = 0,00;
      s.quantidade = 0;
      $("#c").focus();
    };
  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="controlador">
  <table>
    <tr>
      <td width="25%">Código</td>
      <td width="25%">Descrição</td>
      <td width="25%">Preço</td>
      <td width="25%">Quantidade</td>
    </tr>
    <tr>
      <td>
        <input type="text" ng-model="s.codigo" id="c" />
      </td>
      <td>
        <input type="text" ng-model="s.descricao" />
      </td>
      <td>
        <input type="text" ng-model="s.preco" />
      </td>
      <td>
        <input type="text" ng-model="s.quantidade" />
      </td>
    </tr>
    <tr>
      <td colspan="2">
        <button style="width: 250px" ng-click="addItem(s);">
          Inserir
        </button>
      </td>
    </tr>
  </table>
  <div>
    <table>
      <tr>
        <td width="25%">Código</td>
        <td width="25%">Descrição</td>
        <td width="25%">Preço</td>
        <td width="25%">Quantidade</td>
      </tr>
      <tr ng-repeat="item in items" ng-show="items.length>0">
        <td>
          <input type="text" ng-model="item.codigo" />
        </td>
        <td>
          <input type="text" ng-model="item.descricao" />
        </td>
        <td>
          <input type="text" ng-model="item.preco" />
        </td>
        <td>
          <input type="text" ng-model="item.quantidade" />
        </td>
      </tr>
    </table>
  </div>
</div>

The suitability is done in your code, because, you don’t have that list to simulate, that’s the closest, any questions ask.

Good evening Virgilio Novic, I thank you in advance for your disposition, but it is not yet what I need. Look at these images to see if you understand better: [1] prnt.sc/dlz9dq [2] prnt.sc/dlz9tq, that is, the fields that are filled automatically from the search, when clicking on the "Insert" button, should be "cloned" to the table below [Code | Description | Price | Quantity].

– lucasbento

2016/12/21 at 01:06
@luccasrodrigo was not very clear in his question, but, you need to generate a list of values from the insertion of a value that comes from the bank? Perhaps you need to make an issue in your question reporting these two images ... I stand by.

– novic

2016/12/21 at 14:36
Good afternoon @virgilionovic, editions made.

– lucasbento

2016/12/21 at 15:31
@luccasrodrigo I made a minimal example, for not having the list you have in your code, but, this will help you solve most of your problem or maybe everything with this push, I hope it helped, because my idea is always to help ...

– novic

2016/12/21 at 18:55
Good afternoon again @virgilionovic, I tested this "Minimal Example" and it didn’t work. I tried to modify my reality and it didn’t work either. I searched http://stackoverflow.com/ and found a solution almost close to what I need, however I could not make the example work with button. Another detail is that the fields, which should be filled in manually, are filled in through a function, and when I click insert it does not recognize the value of the input.

– lucasbento

2016/12/23 at 13:54
Mentioned publication [User: @shashankagrawal]: http://stackoverflow.com/questions/34195086/angularjs-copy-the-value-of-one-input-box-to-another-input-box-only-if-checkbox

– lucasbento

2016/12/23 at 13:55
The problem @luccasrodrigo not my solution, is how is yours, because this answer works normally only needs to be adapted to your scenario that is not clear-cut for an objective answer! I apologize for something. Operation of the minimum example just to make clear, is to manually populate the fields and click the button, will be created a list of items as you want!

– novic

2016/12/23 at 14:29

Show 2 more comments

Browser other questions tagged javascript html angularjs html5

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

by BrTkCa • **11,094** points · Answer 1 · 2016-12-20T12:33:15+00:00

One option is to create these variables in the controller, in the function that fills them and not go through argument:

HTML

 <input type="button" value="Inserir" id="inserir-item"  ng-click="addItem()"/>

Angular controller

var app = angular.module('app', []);

$scope.itemCodigo = "algum_valor";
$scope.itemDescricao = "outro_valor";
$scope.items = [];

app.controller("controlador", function($scope){
    $scope.addItem = function () {
              $scope.items.push({
                  codigo: $scope.itemCodigo,
                  descricao: $scope.itemDescricao
        });
    };
})

by lucasbento • **856** points · Answer 2 · 2016-12-23T19:16:42+00:00

Good afternoon @virgilionovic, I got a "makeshift" solution, taking the values as follows:

$scope.items.push({
            codigo: $("input[name='codigo']").val(),
            descricao: $("input[name='descricao']").val(),
            preco: $("input[name='preco']").val(),
            quantidade: s.quantidade,
            soma: sum++
 });