Calculate the sum of repeated elements in Angular-JS using ng-repeat

4

In the code below an expense list is displayed using ng-repeat. For each element the description and the value are shown. What is the simplest way to show this total?

<table class="table table-hover">
    <th>DESCRIÇÃO</th>
    <th>VALOR</th>
    <th class="text-center">Ação</th>
    <tr ng-repeat="despesa in despesas | filter: filtro">
        <td>
            <a ng-href="#/despesa/{{despesa._id}}">{{despesa.nome}}</a>
        </td>
        <td>R${{despesa.valor}}</td>
        <td class="text-center">
            <button ng-click="remove(despesa)" class="btn btn-warning">
                Remover
            </button>
        </td>
    </tr>
    Total: {{total}}
</table>

    
asked by anonymous 15.08.2017 / 16:10

1 answer

2

There are some handy ways to summarize in , example :

1): Calculating within ng-repeat

var app = angular.module('app', []);
app.controller('ctrl', function($scope){
    $scope.despesas = [
        {'nome': '1', valor:100},
        {'nome': '2', valor:20},
        {'nome': '3', valor:40},
    ];
    $scope.remove = function(){
    };
    $scope.total = 0;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><divng-app="app" ng-controller="ctrl">
<table class="table table-hover">
    <th>DESCRIÇÃO</th>
    <th>VALOR</th>
    <th class="text-center">Ação</th>
    <tr ng-repeat="despesa in despesas">
        <td>
            <a ng-href="#/despesa/{{despesa._id}}">{{despesa.nome}}</a>
        </td>
        <td>R${{despesa.valor}}</td>
        <td class="text-center" ng-init="$parent.total = $parent.total + despesa.valor">
            <button ng-click="remove(despesa)" class="btn btn-warning">
                Remover
            </button>
        </td>
    </tr>
    Total: {{total}}
</table>
</div>
Note: If you have any filter would not be the most recommendable, if the rule is the general sum, because the sum will also apply the filter.

2) Calculating with function :

var app = angular.module('app', []);
app.controller('ctrl', function($scope){
    $scope.despesas = [
        {'nome': '1', valor:100},
        {'nome': '2', valor:20},
        {'nome': '3', valor:40},
    ];
    $scope.remove = function(){
    };
    $scope.getTotal = function()
    {
      var s = 0;
      for(i = 0; i < $scope.despesas.length; i++)
      {
        s = s + $scope.despesas[i].valor;
      }        
      return s;
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><divng-app="app" ng-controller="ctrl">
<table class="table table-hover">
    <th>DESCRIÇÃO</th>
    <th>VALOR</th>
    <th class="text-center">Ação</th>
    <tr ng-repeat="despesa in despesas">
        <td>
            <a ng-href="#/despesa/{{despesa._id}}">{{despesa.nome}}</a>
        </td>
        <td>R${{despesa.valor}}</td>
        <td class="text-center" ng-init="$parent.total = $parent.total + despesa.valor">
            <button ng-click="remove(despesa)" class="btn btn-warning">
                Remover
            </button>
        </td>
    </tr>
    Total: {{getTotal()}}
</table>
</div>

One of two ways may fit your question, but I believe the second is the best, perhaps, by summarizing the items contained in this array , but it's nice to have several possible ways to solve a problem and how best to fit in with your business rule.

    
15.08.2017 / 16:30