2

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>            

1 Resposta 1

3

Crie uma função no seu servico para calcular o total e use dentro do seu controller da seguinte forma:

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;
   };
   this.adicionaProduto = function (produto) { // adicionaproduto retorna o total
      produtos.push(produto);
      return calculatotal();
   };
});


app.controller('carrinhoController', function ($scope, carrinhoService, $filter) {
   $scope.teste = 'oi';
   $scope.produtos = carrinhoService.getProdutos();
   $scope.total = carrinhoService.calcularTotal();

   $scope.adicionaProduto = function (produto) { // chamado por um botao na tela
      $scope.total= carrinhoService.adicionaProduto(produto);
   }

});

Coloque a div inferior dentro do seu controller:

<div ng-controller="carrinhoController">
   <table>
      <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>
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .