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

Asked

Viewed 552 times

4

In the code below is displayed a list of expenses using ng-repeat. For each element the description and value are shown. What’s 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>

angularjs

1 answer

2


There are some practical ways to summarize , example:

1): Calculating within the 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>
<div ng-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>

Observing: if you have any filter it would not be the most recommended, if the rule is the general sum, because the sum will be applied also the filter.

2) Calculating with a 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>
<div ng-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 the two forms may fit your doubt, but I believe the second is the best, perhaps, by summarizing the full items contained in this array, but, it is nice to have several possible ways to solve a problem and the best that fits according to your business rule.

Browser other questions tagged angularjs

You are not signed in. Login or sign up in order to post.