Adding digits entered in input boxes with keyup event in angular js

Question

I am looking to display the addition of four values entered in the input boxes

<td><input type="text" value="22" style="width:60px;margin:6px;" ng-keyup="getkeys($event)" ng-model="one"></td>
<td><input type="text"  style="width:60px;margin:6px;" ng-keyup="getkeys($event)" ng-model="two"></td>
<td><input type="text"  style="width:60px;margin:6px;" ng-keyup="getkeys($event)" ng-model="three"></td>
<td><input type="text"  style="width:60px;margin:6px;" ng-keyup="getkeys($event)" ng-model="four"></td>

And this is my js

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.getkeys = function (event) {


if($scope.one==='' || $scope.two==='' || $scope.three==='' || $scope.four==="" )
{
  $scope.one=parseInt("0");
  $scope.two=parseInt("0");
  $scope.three=parseInt("0")
  $scope.four=parseInt("0")
}

$scope.keyval = parseInt($scope.one)+parseInt($scope.two)+parseInt($scope.three)+parseInt($scope.four);


console.log($scope.keyval);
}
});

what i want is as soon as someone enters the value in the input boxes ,sum of all the four gets displayed ,the problem is if firstly user enters value in any box it display NaN ,until all the four values are entered any idea how to achieve it? And how to know which ng-model value has been entered ,just like this.value in js

Use the ng-change directive. It is better integrated with the ngModel controller. — georgeawg
– georgeawg, Commented Mar 14, 2018 at 21:06

brk · Accepted Answer · 2018-03-14 17:39:03Z

This is because the other fields are empty & trying to parseInt & add an empty field value will result in NaN.Alternatively you can pass 0 if field is empty

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.getkeys = function(event) {
    if ($scope.one === '' || $scope.two === '' || $scope.three === '' || $scope.four === "") {
      $scope.one = parseInt("0");
      $scope.two = parseInt("0");
      $scope.three = parseInt("0")
      $scope.four = parseInt("0")
    }

    $scope.keyval = parseInt(($scope.one) || 0, 10) + parseInt($scope.two || 0, 10) + parseInt($scope.three || 0, 10) + parseInt($scope.four || 0, 10);


    console.log($scope.keyval);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="myCtrl">
    <input type="text" value="22" style="width:60px;margin:6px;" ng-keyup="getkeys($event)" ng-model="one">
    <input type="text" style="width:60px;margin:6px;" ng-keyup="getkeys($event)" ng-model="two">
    <input type="text" style="width:60px;margin:6px;" ng-keyup="getkeys($event)" ng-model="three">
    <input type="text" style="width:60px;margin:6px;" ng-keyup="getkeys($event)" ng-model="four"></div>
</div>

Ele · Accepted Answer · 2018-03-14 17:39:13Z

You don't need to bind a keyUp event, angularjs does that work for us.
Initialize the model one within the controller.
Create a function, i.e getTotal()
Use the object Number to convert the entered values to numbers.

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.getTotal = function() {
    return Number($scope.one) +
      Number($scope.two) +
      Number($scope.three) +
      Number($scope.four)
  };

  $scope.one = 22;
  $scope.two = 0;
  $scope.three = 0;
  $scope.four = 0;
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">
  <input type="text" style="width:60px;margin:6px;" ng-model="one">
  <input type="text" style="width:60px;margin:6px;" ng-model="two">
  <input type="text" style="width:60px;margin:6px;" ng-model="three">
  <input type="text" style="width:60px;margin:6px;" ng-model="four">

  <p>Total</p>
  <span>{{getTotal()}}</span>
</div>

Nishanth · Accepted Answer · 2018-03-14 17:49:15Z

Minior modification on @Ele code. Change the input type from text to number to facilitate the key up event and disable characters to be entered

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.getTotal = function() {
    return Number($scope.one) +
      Number($scope.two) +
      Number($scope.three) +
      Number($scope.four)
  };

  $scope.one = 22;
  $scope.two = 0;
  $scope.three = 0;
  $scope.four = 0;
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">
  <input type="number" style="width:60px;margin:6px;" ng-model="one">
  <input type="number" style="width:60px;margin:6px;" ng-model="two">
  <input type="number" style="width:60px;margin:6px;" ng-model="three">
  <input type="number" style="width:60px;margin:6px;" ng-model="four">

  <p>Total</p>
  <span>{{getTotal()}}</span>
</div>

Collectives™ on Stack Overflow

Adding digits entered in input boxes with keyup event in angular js

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related