Add values with AngularJS

Question

Add values with AngularJS

Navigation

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

0

I'm trying to add two values. Example valueA 150.00 and valueB 50.00. I've tried to do {{valueA + valueB}} and is returning 150.0050. Can not you sum it up this way? value of ng-repeat and field valueB input

angularjs

asked by anonymous 11.10.2018 / 00:44

2 answers

Repeat error when submitting form Create Site Query Status

score 0 · Answer 1

This happens because valueA and valueB are not numbers but strings, so adding it is actually concatenating its values.

I would use something like {{Number(valorA) + Number(valorB)}}

Or convert the direct model into the controller, like this: $scope.valorA = parseFloat(valorA);

Just look at the number format, which should always have a dot as the decimal separator, and never a comma.

score 0 · Answer 2

It's quite easy to do what you need. In Javascript to work with float values it is cool that you convert the value. Note: The values must be used o. and not the, the ideal would be its value is already dotted in place of a comma, for example: 150.00 but if it is a string with comma ex: '150,00' you can use a replace with a parseFloat. I'll put a simple example to try to help.

app = angular.module('meuapp', []);

app.controller('moduloArray', function($scope) {
    $scope.dadosArray = [{
        valor1: '138,00',
        valor2: '25,00'
    }, {
        valor1: '56,00',
        valor2: '84,00'
    }, {
        valor1: '16,00',
        valor2: '73,00'
    }];
    
    //faz o replace trocando vírgula por ponto, convertendo em float e somando os dois numeros
    $scope.calcularValor = function(v1, v2){
      return parseFloat(v1.replace(',','.'))+parseFloat(v2.replace(',','.'));
    }

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><divng-app="meuapp">
    <div ng-controller="moduloArray">
        <table>
            <tr ng-repeat="d in dadosArray">
                <td>
                    <span ng-bind="d.valor1"></span> +
                    <span ng-bind="d.valor2"></span> =
                </td>
                <td>
                    <b ng-bind="calcularValor(d.valor1, d.valor2)"></b>
                </td>
            </tr>
        </table>
    </div>
</div>