How to sum all the elements of an ng-repeat? [duplicate]

Question

How to sum all the elements of an ng-repeat? [duplicate]

Navigation

#1 by (2 votes)
#2 by (2 votes)

4

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

Angular CodeJS:

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 exist, even if more goods are inserted in the future, such as commodity2, commodity3, mechanic4, then the total would have to change according to the number of goods inserted .

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

javascript html angularjs ng-repeat

asked by anonymous 27.09.2017 / 13:44

2 answers

2

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><divng-app="meumodulo">
  <div ng-controller="MercadoriaCarrinhoController as vm">
    Total: {{vm.somar()}}
  </div>
</div>

Note: Ideally your total property should be declared without quotes, after all it is a number and not a String .

27.09.2017 / 14:11

Convert JSON to EXCEL JavaScript function to add days, is adding up a month ahead

score 2 · Accepted Answer

Guilherme,

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

I did it the way I would and set up a Plunker to make it easier to see your problem: Click Here

Basically create a totalSum variable and assign it in a 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>