2
I have a table
with a shopping cart. Cart items are: n° pedido, produto, quantidade
(in this case it is an input with ng-model='produto.quantidade * produto.preco'
) that will automatically fill the row of the price table of your respective product.
However, I created under the table
an area in which the total of everything will appear. I would like that part of the total of everything to be filled automatically, as I was changing the amount of items in the cart.
How can I do that? I thank you in advance.
Follow my code below:
var app = angular.module('app', []);
app.service('carrinhoService',function(){
var produtos = [
{numero_pedido:'#1045', produto:'Chuteira', quantidade:1, preco:400},
{numero_pedido:'#1045', produto:'Camisa', quantidade:1, preco:390},
{numero_pedido:'#1045', produto:'Calça', quantidade:1, preco:360}
];
this.getProdutos = function()
{
return produtos;
};
this.calcularTotal = function()
{
var total=0;
for(var i=0; i<produtos.length;i++)
{
total = total + produtos[i].preco;
}
return total;
}
});
app.controller('carrinhoController', function($scope, carrinhoService, $filter){
$scope.teste = 'oi';
$scope.produtos = carrinhoService.getProdutos();
$scope.total = carrinhoService.calcularTotal();
});
THE HTML:
<table ng-controller="carrinhoController">
<th>N° do Pedido</th>
<th>Produto</th>
<th>Quantidade</th>
<th>Preço</th>
<th class="text-center">Excluir</th>
<tr ng-repeat="produto in produtos">
<td>{{produto.numero_pedido}}</td>
<td>{{produto.produto}}</td>
<td width="5"><input type="text" ng-model="produto.quantidade"></td>
<td>{{produto.quantidade * produto.preco | currency: 'R$'}}</td>
<td class="text-center"><a href="#"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></a></td>
</tr>
</table>
<div class="quantidade">
<strong>Total: {{total | currency:'R$'}}</strong>
</div>