How to sum up all the elements of an ng-repeat?

Question

Example: I have any ng-repeat, which repeats each one a number. How do I store a variable that is equal to the sum of this number of each repeat?

Code Angularjs:

ngular.module('meumodulo', [])

.controller('mercadoria', function($rootScope, $http) {

    var ctrl = this;
    $rootScope.listademercadoria = [];
    
    $rootScope.mercadoria0 = {
        id: 'id1',
        setor: 'setor1',
        foto: 'foto1',
        descr: 'descr1',
        de: de1,
        por: por1,
        mercadoria: '0',
        quantidade: 1,
        total: ''
    }

    $rootScope.listademercadoria.push($rootScope.mercadoria0);

    $rootScope.mercadoria1 = {
        id: 'id2',
        setor: 'setor2',
        foto: 'foto2',
        descr: 'descr2',
        de: 'de2',
        por: 'por2',
        mercadoria: '1',
        quantidade: 1,
        total: ''
    }
    $rootScope.listademercadoria.push($rootScope.mercadoria1);



    $rootScope.showPanel = true;
    $rootScope.listademercadoria.push($rootScope.mercadoria1);

    $rootScope.remover = function(b) {

        {
            $rootScope.showPanel = !$rootScope.showPanel;
        }
    }


});

HTML code:

...

<div class="body" ng-controller="mercadoria">
  <span>Total dos produtos: {{listademercadoria[0]['total']}}</span>
</div>

...

These codes only show the value of the "total" variable within $rootScope.mercadoria0.

It is necessary to show the sum of the variables "total" of all the repeats that there are, even if it is inserted in the future more merchandise, as mercadoria2, mercadoria3, mecadoria4, then the total would have to change according to the number of inserted goods.

I have already researched a lot, but in everything I see, it seems that it would be necessary to insert, to each new merchandise, a new installment in the sum. Ex: {{listademercadoria[0]['total']}}+{{listademercadoria[1]['total']}}+{{listademercadoria[2]['total']}} etc....

Answer 1

You can create a function that returns the sum executed in controller. Note that I did this in the example below with the function somar:

angular
  .module('meumodulo',[])
  .controller('MercadoriaCarrinhoController', MercadoriaCarrinhoController);

MercadoriaCarrinhoController.$inject = [];

function MercadoriaCarrinhoController(){
  var vm = this;

  vm.somar = _somar;

  _iniciar();

  function _iniciar() {
    vm.listaDoCarrinho = [];

    vm.listaDoCarrinho.push({
      id: 'id',
      setor: 'setor',
      foto: 'foto',
      descr: 'descr',
      de: 'de',
      por: 'por',
      mercadoria: '0',
      quantidade: 0,
      total: 5,
      boto: -1
    });

    vm.listaDoCarrinho.push({
      id: 'id2',
      setor: 'setor2',
      foto: 'foto2',
      descr: 'descr2',
      de: 'de2',
      por: 'por2',
      mercadoria: '1',
      quantidade: 1,
      total: 0
    });
  }

  function _somar() {
    var tamanho = vm.listaDoCarrinho.length;
    var soma = 0;

    for (var indice = 0; indice < tamanho; indice++) {
      soma = soma + vm.listaDoCarrinho[indice].total;
    }

    return soma;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="meumodulo">
  <div ng-controller="MercadoriaCarrinhoController as vm">
    Total: {{vm.somar()}}
  </div>
</div>

Observing: The ideal is that your property total is declared without quotation marks, after all it is a number and not a String.

Answer 2

William,

It is not recommended to use $rootScope, because it is a global variable. Use only when necessary. (e.g. use a $rootScope that saves your previous and current page, to create a smart "Back" button) Use instead the $Scope.

I did it the way I would and mounted a Plunker to facilitate the visualization of your problem: Click Here

Basically create a variable totalSum and assigns it in a loop loop For

controller js.

$scope.totalSum = 0

for(var i = 0 ; i < $rootScope.listademercadoria.length; i++){
       $scope.totalSum = $scope.totalSum +  
       $rootScope.listademercadoria[i].quantidade
}

index.html

<span>Total dos produtos: {{totalSum}}</span>