How to update fields in Angularjs?

Question

How to update fields in Angularjs?

Asked 7 years, 10 months ago

Viewed 787 times

3

When inserting items in 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,

When clicking on the Tributes button, the following screen appears:

Simulation: https://jsfiddle.net/t9grvL4z/1/

How to update the taxes of each product?

1 answer

Browser other questions tagged javascript html angularjs

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

by Hugo Lima • **336** points · Answer 1 · 2017-01-02T02:14:43+00:00

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

Solution based on the "Simulation" presented:

Creation of the addTributos method;

Insertion of the ng-model inside the modal;

Insertion of the track by $index (Angularjs loop, in HTML);

Creation of a temporary object with the product name Rib.

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>
<script src="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>


<body ng-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>