Add input angular text

Question

Add input angular text

Navigation

#1 by (2 votes)

0

Suppose I have the following:

<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;
          }
      };

Enter the function but I do not get the total, which in this case is 110, I think the problem is: $scope.factor = { inputs: [] };

angularjs algoritmos

asked by sirdaiz 10.11.2016 в 12:31

source

1 answer

how can I get a specific data on a map in java? [closed] Geolocation in php

score 2 · Accepted Answer

First, if you are occupying Angularjs , apply it. If you can have "n" inputs the best thing you can do is define the amount of input in the controller.

In this case declare $scope.fields containing an array called inputs , as the first instance is empty. Then I declare the function $scope.addInput what it does is add '' and why? In the view I have a ng-repeat of my array fields but within a input therefore add inputs constantly. Finally I add the event ng-change to the function getTotal that ran my array fields and get the value entered. If the value of the sum is greater than 100 as you said, the Save button is 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 to see the example working

EDITING

Since you applied a lot of my code but as you say "I do not get the total", it's because the total is not $scope.total if not var total , change total to $scope.total

To add it and see it in the first instance add Total: {{total || 0}} to your view

    $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;
        }
    };

EDIT 2

Since your other problem is to initialize an input with a ng-model you should not occupy ng-value for any reason.

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

To immediately see the result once the view is loaded, below your function getTotal(); you must call it.

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