Addition of two values in Angular js

Question

I want to add two values using Angular js . I have fetched values from database using $http.get($scope.url) and using the values on html page. now I want to add " 1" in the value. my code is :- app.js

mainApp.controller("displayController", ['$scope', '$http', 'shareDataService', function($scope, $http, shareDataService) {     
        $scope.url = 'incomeBenefit.php';
        $http.get($scope.url)
        .then(function (response) {$scope.names = response.data.records;                        
            for(X in $scope.names){ 
                var t_age = $scope.names[X]['client_age'];                                                                                      
                var t_premium = $scope.names[X]['premium'];                                                                                                     
            }           
            $scope.t_age = t_age;
            $scope.t_premium = t_premium;   
        });
}]);

and my html page :-

        <ul id="form-bt-main" class="sec-row" ng-repeat="n in [] | range:31">
            <li class="form-bt">{{n}}</li>
            <li class="form-bt">{{t_age = t_age +1}}</li>   
        </ul>

I want to add '1' in t_age. t_age = '24' and want values like this 24 25 26 27 28 29 30 in li on output screen.

its not working. not adding the values . its giving me 2401 . — Ranjeet singh, Aug 01 '16 at 11:37
{{t_age ++ $index ++ 1}} it will work please test it. One + for concatenation and other for adding two numbers — Hassan ALi, Aug 01 '16 at 11:38
it is because t_age is string, parse it: `$scope.t_age = parseInt(t_age);` — Slava Utesinov, Aug 01 '16 at 11:38
@Ranjeetsingh ji i have edited my answer and it's tested try it and if work thums up!! — Jorawar Singh, Aug 01 '16 at 12:05

Jorawar Singh · Answer 1 · 2016-08-01T12:03:21.393

2

angular.module('app',[]).controller('ctrl',function($scope){
        $scope.age = parseInt('24');
        $scope.names = ["singh","jorawar","kiran"];                
   });
<body ng-controller="ctrl">

<div ng-repeat="name in names">
    {{name}}<br>
    {{age + $index - 1 + 1}}
</div>
</body>

edited Aug 01 '16 at 12:03

answered Aug 01 '16 at 11:37

Jorawar Singh

7,463
4
26
39

score 0 · Answer 2 · answered Aug 01 '16 at 11:38

0

<li class="form-bt">{{t_age = t_age +1}}</li> is not valid.

just write <li class="form-bt">{{t_age +1}}</li>

or if you want that value in controller as ng-model, try this

<li class="form-bt" ng-model="ages[$index]">{{t_age +1}}</li>

answered Aug 01 '16 at 11:38

Syam Pillai

4,967
2
26
42

score 0 · Answer 3 · answered Aug 01 '16 at 11:38

$scope.t_age = t_age; might be a string, just use parseInt(t_age); A simple fiddle to help..

<div ng-app="">
  <div ng-controller="MyCtrl">
      {{age + 1}}
  </div>
</div>

JS:

function MyCtrl($scope) {
  $scope.age = parseInt('24');
}

http://fiddle.jshell.net/0wh13nrz/1/

score 0 · Answer 4 · answered Aug 01 '16 at 11:40

In your controller, you have to parse your age which is a string into a int

parseInt('string', 10);  // parseInt with radix

CONTROLLER

mainApp.controller("displayController", ['$scope', '$http', 'shareDataService', function($scope, $http, shareDataService) {     
        $scope.url = 'incomeBenefit.php';
        $http.get($scope.url)
        .then(function (response) {$scope.names = response.data.records;                        
            for(X in $scope.names){ 
                var t_age = parseInt($scope.names[X]['client_age'], 10);                                                                                      
                var t_premium = $scope.names[X]['premium'];                                                                                                     
            }           
            $scope.t_age = t_age;
            $scope.t_premium = t_premium;   
        });
}]);

Now you variable t_age is an integer

score 0 · Answer 5 · answered Aug 01 '16 at 11:42

What kind of array is names. If it has name object then seeing your controller your html code must look something like this-

<ul id="form-bt-main" class="sec-row" ng-repeat="n in names | range:31">
    <li class="form-bt">{{n.name}}</li>
    <li class="form-bt">{{n.client_age = n.client_age + 1}}</li>
    <li class="form-bt">{{n.premium}}</li>
    <li class="form-bt">0</li>
    <li class="form-bt">27000</li>
    <li class="form-bt">0</li>
</ul>

and your controllers should not have loop to manipulate the names array, ng-repeat does that looping. Your controller should also change to -

mainApp.controller("displayController", ['$scope', '$http', 'shareDataService', function($scope, $http, shareDataService) {     
        $scope.url = 'incomeBenefit.php';
        $http.get($scope.url)
        .then(function (response) {
            $scope.names = response.data.records;
        });
    }]);

score 0 · Answer 6 · edited May 23 '17 at 12:25

0

If you need to output values like that, try to ng-repeat number. Example:

<ul>
    <li ng-repeat="i in getNumber(7)">{{$index+number}}</li>
</ul>

And in your controller:

$scope.number = parseInt('24');
$scope.getNumber = function(num) {
    return new Array(num);   
}

live demo (jsfiddle).

full post about that trick is here

edited May 23 '17 at 12:25

Community

1
1

answered Aug 01 '16 at 11:53

szymeo

423
3
16

Addition of two values in Angular js

6 Answers6