How to pass value changed dynamically to function, in AngularJS

Navigation
4

The itemCode, itemDescription, itemPreco, and itemQuantity fields are populated dynamically (at run time, without refresh ) from a query performed in the database. However, these values, when passed as a 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 | Contact Us | Quantity] are left blank.

Illustration:

HTML:

<divng-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: itemQuantity is defined in another input within the code.

    
asked by anonymous 20.12.2016 / 13:25

3 answers

2

You have to create in your $scope the array of items and to initialize it can be used in two ways, one inside the controller itself and another one through ng-init by 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><scriptsrc="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 controller itself 

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><scriptsrc="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>

Reference ng-init

@@ Edit

I understand that you need to make a listing with the elements chosen in the query, I'll put a minimal example to fit it in the best possible way.

Minimum 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><scriptsrc="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 made in your code, because, it does not have that list to simulate, this is the closest, any questions ask.

    
20.12.2016 / 13:47
2

One option is to create these variables in the controller, in the function that fills them and not pass by 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
        });
    };
})
    
20.12.2016 / 13:33
0

Good afternoon @virgilionovic, I got an "improvised" 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++
 });
    
23.12.2016 / 20:16
Is my code object-oriented? How does the Position property work? [duplicate]