6

Estoy aprendiendo AngularJS y JavaScript, y siguiendo los ejemplos del libro que estoy usando, encuentro algo que me gustaría comprender.

Tengo un controlador que efectúa una de dos operaciones matemáticas, según el botón que se presione: sumar y multiplicar.

var controladorApp = angular.module('controladores', []);
controladorApp.controller('controladorConMetodos', function($scope){
  $scope.valor1 = 0;
  $scope.valor2 = 0;

  $scope.sumar = function () {
    $scope.resultado = $scope.valor1 + $scope.valor2;
  };

  $scope.multiplicar = function() {
    $scope.resultado = $scope.valor1 * $scope.valor2;
  }
});

En la página web, simplemente llamo a cada método con su propio botón y muestro el resultado una línea después. Los campos input son los mismos para ambos métodos.

<div class="" ng-controller="controladorConMetodos">
  <input type="text" ng-model='valor1'>
  <input type="text" ng-model='valor2'>
  <button type="button" name="sumar" ng-click="sumar()">Sumar</button>
  <button type="button" name="multiplicar" ng-click='multiplicar()'>Multiplicar</button>
  <hr>
  <p>{{ resultado }}</p>
</div>

Este es mi problema: cuando uso el método multiplicar(), el resultado es correcto. Sin embargo, cuando llamo al método sumar() los valores se concatenan y no se suman.

Supongo que tengo que hacer un cast, pero me gustaría saber por qué (y cómo). En el libro Manual del Guerrero no mencionan esta situación, por lo que supongo que está relacionada a mi versión de AngularJS, la 1.4.9, frente a la 1.3.2 usada en el libro.

2 respuestas 2

7

Debes utiliar parseInt

  $scope.sumar = function () {
    $scope.resultado = parseInt($scope.valor1) + parseInt($scope.valor2);
  };

  $scope.multiplicar = function() {
    $scope.resultado = parseInt($scope.valor1) * parseInt($scope.valor2);
  }

Ademas, podrías utilizar <input type="number"> para prevenir que se ingresen caracteres no numéricos.

Sino deberías agregar alguna validación de tipos.

Con respecto al por que: Esto no tiene nada que ver con AngulaJS, es javascript nada mas. Pasa que el * no produce el efecto pues no tiene una función sobre String entonces primero realiza la conversion del tipo y luego la multiplicación. El operador + si tiene función sobre string, que es concatenar. Por ello no hay conversion.

>10 * '10'
<100
>10 + '10'
<"1010"
3
  • Muchas gracias, pero ¿por qué multiplicar() funciona sin paseInt(), hay una función u operador específico para sumar números?
    – toledano
    Commented el 1 feb. 2016 a las 19:38
  • @toledano lo que pasa es que el signo + es usado para concatenación, y como tomas el input del texto como "Texto" debes parsearlo para que sepa que va a sumar y no concatenarlo.
    – Wilfredo
    Commented el 1 feb. 2016 a las 19:47
  • En el libro que estoy siguiendo, @WilfredoP, no hay menciones sobre este "parseo" o casting, por eso preguntaba si era algo relacionado con la versión utilizada; sin embargo, validar la información, como recomienda rnrneverdies me parece una buena práctica.
    – toledano
    Commented el 1 feb. 2016 a las 19:52
3

También podrías utilizar el elemento <input type="number" ... />

De esta forma no es necesario realizar la conversión en el controlador porque se realiza automáticamente (bueno, de ello se encarga la directiva input[number] incorporada en Angular)

Además te beneficiarías del resto de ventajas de este elemento (validación, mejoras de usabilidad,...)

3
  • ¡Excelente sugerencia! De hecho, creo que esa es la manera correcta y yo simplemente copié mal el ejemplo del libro. También explica muchos errores míos en desarrollos reales.
    – toledano
    Commented el 1 feb. 2016 a las 20:12
  • Ya te lo había sugerido @rnrneverdies en su respuesta pero no se ve por un error de formato que he intentado editar sin éxito
    – rsciriano
    Commented el 1 feb. 2016 a las 20:16
  • gracias, no lo habia notado. Commented el 1 feb. 2016 a las 20:18

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.