Adding numbers in Angular js

Question

I'm learning angular js and got stuck in the following code:

<div ng-app="calculate">
Amount: <input type='text'  data-ng-model='amount' name = 'amount' placeholder = 'Enter amount' >
Charge: <input type='text'  name = 'charge' ng-bind="charge" value="{{ amount | serviceFilter }}" >
Total:  <input type='text'  value= " {{(amount)+ (amount | serviceFilter)}}" name = 'total' >
</div>

<script>
  angular.module('calculate', [])
  .filter('serviceFilter', function( ){
    return function(amount){
      if(angular.isUndefined(amount)){
        charge = '0';
      }else{
        if(isNaN(amount)){
          charge = 'Invalid Data !!!';
        }else{
          if(amount < 1000){
            charge = '200';
          }else{
            charge = '500';
          }
        }
      }
      return charge;
   };
  });
</script>

When I enter the amount. I get appropriate charge. But I can't add the amount and charge get the total value. Let's say:

Amount: 1200
Charge: 500
Total : 1700

I need to get 1700 but instead I get

Total: 1200 500

Also I want to know if this is the appropriate way or there is any other better way to do this. Thankyou

These are treated as String, convert it to Integer and then perform add operation. — Arpit Aggarwal
– Arpit Aggarwal, Commented Mar 25, 2015 at 6:28

Kalhan · Accepted Answer · 2015-03-25 07:12:26Z

This happens because when you bind the numbers in to text inputs they are treated as strings so change the text box type to number.

<input type='number' data-ng-model='amount' name='amount' placeholder='Enter amount'>

and change the string type numbers in filter to int

 app.filter('serviceFilter', function( ){
    return function(amount){      
      if(angular.isUndefined(amount)){
        charge = 0;
      }else{
        if(isNaN(amount)){
          charge = 'Invalid Data !!!';
        }else{
           if(amount < 1000){
             charge = 200;
          }else{
            charge = 500;
          }
        }
      }
      return charge;
   };
});

or return the charge after converting to int return parseInt(charge); like @LVarayut suggested.

here is the Demo Plunker

OR

do a simple hack to convert these string values to int as,

 <input type='text' value="{{ (amount-0) + ((amount | serviceFilter)-0) }}" name='total'>

(amount-0) and ((amount | serviceFilter)-0) will return a int, removing 0 will result in a number.

here is the Demo Plunker

dting · Accepted Answer · 2015-03-25 06:53:58Z

Here are a couple of ways to do it:

var app = angular.module('app', []);

app.controller('myController', function($scope) {
  $scope.strNum = '1';
  $scope.parseInt = parseInt
});

app.filter('num', function() {
  return function(input) {
    return parseInt(input, 10);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="myController">
    {{ strNum }}
    {{ 1*strNum + 1*strNum }}
    {{ parseInt(strNum, 10) + parseInt(strNum, 10) }}
    {{ (strNum|num) + (strNum|num) }}
  </div>
<div>

lvarayut · Accepted Answer · 2015-03-25 06:39:06Z

You can either use parseInt() in your serviceFilter or multiply the string value by one, to convert it to integer.

First option:

<script>
  angular.module('calculate', [])
  .filter('serviceFilter', function( ){
    return function(amount){
      var chargeInt;
      if(angular.isUndefined(amount)){
        charge = '0';
      }else{
        if(isNaN(amount)){
          charge = 'Invalid Data !!!';
        }else{
          if(amount < 1000){
            charge = '200';
          }else{
            charge = '500';
          }
        }
      }
      chargeInt = parseInt(charge);
      if (isNaN(chargeInt))
          return charge;
      else 
          return chargeInt;
   };
  });
</script>

Second option:

<div ng-app="calculate">
Amount: <input type='text'  data-ng-model='amount' name = 'amount' placeholder = 'Enter amount' >
Charge: <input type='text'  name = 'charge' ng-bind="charge" value="{{ amount | serviceFilter }}" >
Total:  <input type='text'  value= " {{(amount)+ 1 * (amount | serviceFilter)}}" name = 'total' >
</div>

Collectives™ on Stack Overflow

Adding numbers in Angular js

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related