Tenho uma table
com um carrinho de compras. Os itens do carrinho são: n° pedido, produto, quantidade
(nesse caso é um input com ng-model='produto.quantidade * produto.preco'
) que vai preencher automaticamente a linha da tabela preço de seu respectivo produto.
Porém, eu criei embaixo da table
uma área na qual vai aparecer o total de tudo. Eu gostaria que essa parte do total de tudo fosse preenchido automaticamente, à medida em que eu fosse mudando a quantidade de ítens do carrinho.
De que forma posso fazer isso? Desde já eu agradeço.
Segue abaixo meu código:
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();
});
O 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>