Dynamically populate a databind

Question

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>            

Answer 1

Create a function in your service to calculate the total and use within your controller as follows:

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);
   }

});

Place the lower div inside your 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>