Angularjs ng-value sum fields

Question

Hi i have inputs like this

<input type="text" ng-model="tbl.Public">
<input type="text" ng-model="tbl.Private">
<input type="text" ng-value="tbl.Public--tbl.Private" ng-model="tbl.Total">

the above form will working fine it will sum the Public and Private value and put it in tbl.Total field. My problem is in edit form where value of tbl.Total, tbl.Public, tbl.Private are assign from database.

js

$scope.tbl.Public=10;
$scope.tbl.Private=25;
$scope.tbl.Total=35;

now after assigning a value from js when i change value of tbl.Public or tbl.Private in form it is not affecting a tbl.Total it should sum the two value and put it in tbl.Total field. Thank you for your any help and suggestion.

Robin-Hoodie · Accepted Answer · 2016-11-10 09:45:13Z

3

ng-value is usually used on radiobuttons and option elements, it's not a good fit for your use case.

A better thing to do would be implementing an updateTotal() function combined with ng-change. I would also recommend changing your input types to number so you're not allowing users to sum text.

<input type="number" ng-model="tbl.Public" ng-change="updateTotal();">
<input type="number" ng-model="tbl.Private" ng-change="updateTotal();">
<input type="number" ng-model="tbl.Total">

In your controller:

$scope.updateTotal = function() {
  $scope.tbl.Total = $scope.tbl.Public + $scope.tbl.Private;
}

answered Nov 10, 2016 at 9:45

Robin-Hoodie

4,9944 gold badges33 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

sanu Over a year ago

yes i know, i can solve in this way but just wondering if there is any solution for my code

Robin-Hoodie Over a year ago

@sanu If you can solve it this way, why do you want to use ng-value then? What's the advantage?

sanu Over a year ago

actually I have multiple sum fields in my form (more than 10), so If I do in my style I don't have to add extra functions in my js that is only the reason thanks anyway

sanu · Accepted Answer · 2016-11-10 19:26:39Z

0

It should be like this to prevent from concatenate

$scope.updateTotal = function() { 
  var Public = Number($scope.tbl.Public || 0); 
  var Private = Number($scope.tbl.Private || 0); 
  $scope.tbl.Total = Public + Private; 
}

answered Nov 10, 2016 at 19:26

sanu

1,0883 gold badges15 silver badges29 bronze badges

Collectives™ on Stack Overflow

Angularjs ng-value sum fields

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related