How to update fields in AngularJS?

Question

How to update fields in AngularJS?

Navigation

#1 by (4 votes)

3

When inserting items into the list using the following code snippet:

$scope.items.push({
                codigo: $scope.s.codigo,
                ncm: $scope.s.ncm,
                descricao: $scope.s.descricao,
                preco: $scope.s.preco,
                quantidade: $scope.s.quantidade
            });

Each product will have different Taxes,

ClickingtheTaxesbuttondisplaysthefollowingscreen:

Simulation: link

How to update the taxes of each product?

javascript html angularjs

asked by anonymous 02.01.2017 / 01:35

1 answer

Time to count records the first time How to pass response from one command as argument to another command?

score 4 · Accepted Answer

Just create a method that by clicking on "Taxes", the object in question will be mapped by another temporary object and you will be able to individually change the attributes of each product.

Solution based on "Simulation" displayed:

→ Creating the addTributes method;

→ Insert ng-model into the modal;

→ Insert of track by $index (loop in AngularJS, in HTML);

→ Creating a temporary object named productTrib.

var app = angular.module('app', []);
    app.controller('controlador', function($scope, $http) {
	$scope.user = {};
    $scope.produtoTrib = {};
	$scope.items = [];
	var sum = 1;
	
	$scope.addItem = function (user){
			$scope.items.push({
				nome: $("input[name='nome']").val(),
				email: $("input[name='email']").val(),
				soma: sum++
			});
		  user.nome = '';
		  user.email = '';	
	};
      
     
    $scope.addTributos = function (produto){
        $scope.produtoTrib = produto;
	};
      
   
});

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><bodyng-app="app" ng-controller="controlador">

<form ng-submit="submitForm()">
    <label>Nome: </label><input type="text" name="nome" ng-model="user.nome">
    <label>E-mail: </label><input type="text" name="email" ng-model="user.email">
    
    <input type="text" hidden name="email" ng-model="user.telefone">
    <input type="text" hidden name="email" ng-model="user.cpf">
    
    <input type="button" value="Adicionar" ng-click="addItem(user)" />
</form>
<br />

<div ng-repeat="item in items track by $index">
ID: {{item.soma}}<br />
Nome: {{item.nome}}<br />
E-mail: {{item.email}}<br /><br />
<!-- {{item.telefone}} - {{item.cpf}} -->
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#myModal" ng-click="addTributos(item)">Tributos</button>
<hr />
</div>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Tributos</h4>
      </div>
      <div class="modal-body">
        <label>Telefone: </label><input type="text" name="telefone" ng-model="produtoTrib.telefone">
        <label>CPF: </label><input type="text" name="cpf" ng-model="produtoTrib.cpf">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Atualizar</button>
      </div>
    </div>

  </div>
</div>

</body>