0

Supongamos que tengo lo siguiente:

<body data-ng-init="getTotal()">
<input type="number" ng-change="getTotal()" ng-model="factor.inputs[0]"
ng-value="30"/>
<input type="number" ng-change="getTotal()" ng-model="factor.inputs[1]"
ng-value="20" />
<input type="number" ng-change="getTotal()" ng-model="factor.inputs[2]"
ng-value="60" />
{{total}}
<input type="submit" ng-disabled="disabledSave" value="Save" />

appcontroller.js

      $scope.factor = { inputs: [] };
      $scope.getTotal = function() {    
          $scope.disabledSave = false;
          var total = 0;

          for(var i = 0; i < $scope.factor.inputs.length; i++){
              var numero = $scope.factor.inputs[i] || 0;                  
              total = total + numero;
          }

          if (total > 100) {
              $scope.disabledSave = true;
          }
      };

Entra a la función pero no me sale el total, que en este caso es 110, creo que el problema esta en : $scope.factor = { inputs: [] };

1
  • con "puedo tener N input number" te refieresa a que no solo hay 3 campos de numeros si no que puede haber muchos?
    – lois6b
    Commented el 10 nov. 2016 a las 11:32

1 respuesta 1

2

Primero si estas ocupando Angularjs, aplicalo. Si puedes tener "n" inputs lo mejor que puedes hacer es definir la cantidad de input en el controlador.

En este caso declare $scope.fields que contiene un arreglo llamado inputs, como primera instancia esta vacio. Luego declaro la funcion $scope.addInput que lo que hace es agregar '' y porque? En la vista tengo un ng-repeat de mi arreglo fields pero dentro de un input por lo tanto agregar inputs constantemente. Finalmente agrego el evento ng-change a la funcion getTotal que recorri mi arreglo fields y obtiene el valor ingresado. Si el valor de la suma es mayor a 100 como dijiste, el boton Save queda disabled.

$scope.fields = { inputs: [] };
$scope.addInput = function() {
  $scope.fields.inputs.push('');
}
$scope.ver_boton = true;
$scope.getTotal = function(){
  $scope.total = 0;
  for(var i = 0; i < $scope.fields.inputs.length; i++){
    var numero = Number($scope.fields.inputs[i] || 0);
    $scope.total = $scope.total + numero;
  }
  if($scope.total > 100){
     $scope.ver_boton = false;
  }else{
    $scope.ver_boton = true;
  }
}



<input ng-repeat="input in fields.inputs track by $index" type='number' ng-model='fields.inputs[$index]' placeholder='Ingrese numero' ng-change="getTotal();">
<button ng-click="addInput()">Add input</button>
<button ng-click="" ng-disabled="!ver_boton">Save</button>

Codepen para ver el ejemplo funcionando

EDICION

Ya que aplicaste gran parte de mi codigo pero como dices "No me sale el total", es porque el total no es $scope.total si no var total, cambia total a $scope.total

Para que se agregue y vea en primera instancia agrega a tu vista Total: {{total || 0}}

    $scope.factor = { inputs: [] };
    $scope.getTotal = function() {
        $scope.disabledSave = false;
        $scope.total = 0;

        for (var i = 0; i < $scope.factor.inputs.length; i++) {
            var numero = $scope.factor.inputs[i] || 0;
            $scope.total = $scope.total + numero;
        }

        if ($scope.total > 100) {
            $scope.disabledSave = true;
        }
    };

EDICION 2

Como tu otro problema es inicializar un input con un ng-model no deberias ocupar ng-value por ningun motivo.

$scope.fields = { inputs: [] };
$scope.fields.inputs[0] = 30;
$scope.fields.inputs[1] = 80;

Para ver inmediatamente el resultado una vez cargada la vista, debajo de tu funcion getTotal(); debes llamarla.

$scope.ver_boton = true;
$scope.getTotal = function(){
  $scope.total = 0;
  for(var i = 0; i < $scope.fields.inputs.length; i++){
    var numero = Number($scope.fields.inputs[i] || 0);
    $scope.total = $scope.total + numero;
  }
  if($scope.total > 100){
     $scope.ver_boton = false;
  }else{
    $scope.ver_boton = true;
  }
}
$scope.getTotal();
19
  • No era exactamente lo que queria pero me ha servido de guia. Thanks
    – sirdaiz
    Commented el 11 nov. 2016 a las 15:41
  • que querias exactamente entonces? No era conseguir la suma y hacer que se bloqueara el boton? @Jose
    – sioesi
    Commented el 11 nov. 2016 a las 15:45
  • en principio lo tengo, pero imaginate que tengo exactamente ya esto en la vista:
    – sirdaiz
    Commented el 11 nov. 2016 a las 16:09
  • @Jose puedes explicar entonces cual es el error en tu codigo?
    – sioesi
    Commented el 11 nov. 2016 a las 16:22
  • he modificado la pregunta principal, siento pero no se muy bien como funcioan esto de overflow, soy nuevo
    – sirdaiz
    Commented el 11 nov. 2016 a las 16:24

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.