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();