Calculator in angular that does not allow two decimal points

0

I have a problem with a calculator that creates with angular js based on MVC, because it allows more than one decimal point, and I'm not sure how to resign it. Here I leave the code:

HTML

<div ng-app="appCalculadora" class="container">
  <div ng-controller="controladorCalculadora" class="">
    <div class="row">
      <!-- Despliega la fila del resultado -->
      <div class="col-xs-9 result">{{ calculadora.vistaActual }}</div>
      <div class="col-xs-3"><button ng-click="clickReinicio()" class="">c</button></div>
    </div>
    <div class="row">
      <!-- Despliega la 1ra fila de numeros -->
      <div class="col-xs-3"><button ng-click="clickBotonNum(1)">1</button></div>
      <div class="col-xs-3"><button ng-click="clickBotonNum(2)">2</button></div>
      <div class="col-xs-3"><button ng-click="clickBotonNum(3)">3</button></div>
      <div class="col-xs-3"><button ng-click="clickBotonOper('/')">/</button></div>
    </div>
    <div class="row">
      <!-- Despliega la 2da fila de numeros -->
      <div class="col-xs-3"><button ng-click="clickBotonNum(4)">4</button></div>
      <div class="col-xs-3"><button ng-click="clickBotonNum(5)">5</button></div>
      <div class="col-xs-3"><button ng-click="clickBotonNum(6)">6</button></div>
      <div class="col-xs-3"><button ng-click="clickBotonOper('*')">*</button></div>
    </div>
    <div class="row">
      <!-- Despliega la 3ra fila de numeros -->
      <div class="col-xs-3"><button ng-click="clickBotonNum(7)" >7</button></div>
      <div class="col-xs-3"><button ng-click="clickBotonNum(8)" >8</button></div>
      <div class="col-xs-3"><button ng-click="clickBotonNum(9)" >9</button></div>
      <div class="col-xs-3"><button ng-click="clickBotonOper('-')">-</button></div>
    </div>
    <div class="row">
      <!-- Despliega la cuarta fila de numeros -->
      <div class="col-xs-3"><button ng-click="clickBotonNum('0')">0</button></div>
      <div class="col-xs-3"><button ng-click="clickBotonNum('.')" >.</button></div>
      <div class="col-xs-3"><button ng-click="clickEnter()">=</button></div>
      <div class="col-xs-3"><button ng-click="clickBotonOper('+')">+</button></div>
    </div>
</div>
</div>

Angular JS

// Declarar el modelo
modeloCalculadora = {
  resultado: "0", // Mantiene el resultado actual en memoria
  operacion: "",
  numAnterior: "",
  numActual: "",
  ultimoClick: "numero",
  vistaActual: "0", // Muestra la entrada hastaque se muestre el resultado

  reiniciar: function() {

    this.resultado = "0";
    this.operacion = "";
    this.numAnterior = "";
    this.numActual = "";
    this.vistaActual = "0";
  },

  establecerOp: function(operacionAEstablecer) {
    if (this.ultimoClick === "numero") {
      if (!this.numAnterior) {
        this.operacion = operacionAEstablecer;
        this.vistaActual += " " + this.operacion + " ";
        this.numAnterior = this.numActual;
        this.numActual = "";
      } else if (this.numAnterior && this.numActual) {
        this.calcular();
        this.numAnterior = this.resultado;
        this.numActual = "";
        this.operacion = operacionAEstablecer;
        this.vistaActual += " " + this.operacion + " ";
      } else {
        this.operacion = operacionAEstablecer;
        this.vistaActual += " " + this.operacion + " ";
      }
    }
  },

  calcular: function() {

    switch (this.operacion) {
      case "+":
        this.resultado = (parseFloat(this.resultado) || parseFloat(this.numAnterior)) + parseFloat(this.numActual);
        this.numAnterior = this.resultado;
        this.numActual = "";
        break;

      case "-":
        this.resultado = (parseFloat(this.resultado) || parseFloat(this.numAnterior)) - parseFloat(this.numActual);
        this.numAnterior = this.resultado;
        this.numActual = "";
        break;

      case "*":
        this.resultado = (parseFloat(this.resultado) || parseFloat(this.numAnterior)) * parseFloat(this.numActual);
        this.numAnterior = this.resultado;
        this.numActual = "";
        break;

      case "/":
        this.resultado = (parseFloat(this.resultado) || parseFloat(this.numAnterior)) / parseFloat(this.numActual);
        this.numAnterior = this.resultado;
        this.numActual = "";
        break;
      default:
        this.reiniciar();
        alert("usted presiono igual antes de elegir un numero");
    }

  }

};

// declarar el modulo
var appCalculadora = angular.module('appCalculadora', ['moduloCalculadora']);
var moduloCalculadora = angular.module('moduloCalculadora', []);

// Agregar el controlador al modulo
moduloCalculadora.controller('controladorCalculadora', ['$scope', function($scope) {
  $scope.calculadora = modeloCalculadora;
  $scope.clickBotonNum = function(numeroClick) {
    if (modeloCalculadora.vistaActual === "0") {
      modeloCalculadora.vistaActual = "";
    }

    modeloCalculadora.numActual = modeloCalculadora.numActual + numeroClick;
    modeloCalculadora.vistaActual += numeroClick; //cambiar a string
    modeloCalculadora.ultimoClick = "numero";

  };

  $scope.clickBotonOper = function(clickOperacion) {
    modeloCalculadora.establecerOp(clickOperacion);
    modeloCalculadora.ultimoClick = "operacion";
  };

$scope.clickEnter = function() {
    modeloCalculadora.calcular();
    modeloCalculadora.vistaActual = modeloCalculadora.resultado+''; 
    modeloCalculadora.operacion = ""; //limpiar operacion para expresiones en cadena
  };

  $scope.clickReinicio = function() {
    modeloCalculadora.reiniciar();
  };
}]);

Here's the code in codepen

    
asked by Guillermo Navarro 20.09.2016 в 05:20
source

1 answer

-1

Use an add-on called ngMask. Here: link

    
answered by 21.09.2016 в 20:02