AngularJS form field in ng-repeat and sum column

Question

I have dynamic form fields like this:

<div ng-repeat="wspStaffTbl in staff_codes">
     {{wspStaffTbl.Staff_Type}}
     <input type="text" ng-model="wspStaffTbl.Permanent" ng-change="updateTotal()">
     <input type="text" ng-model="wspStaffTbl.Contract" ng-change="updateTotal()">
     <input type="text" ng-model="wspStaffTbl.Total">
</div>

Where staff_codes are recived by my database. I want to sum each Permanent and Contract and put it in Total whenever user put value in wspStaffTbl.Permanent or wspStaffTbl.Contract.

I tried this

<input type="text" ng-value="(wspStaffTbl.Permanent)--(wspStaffTbl.Contract)" ng-model="wspStaffTbl.Total">

It working fine but if the fields already have some data (eg. in edit form) it won't update total. So I need this in my controller:

$scope.updateTotal= function(){
       $scope.wspStaffTbl.Total =  $scope.wspStaffTbl.Permanent + $scope.wspStaffTbl.Contract;
    }

Sajeetharan · Accepted Answer · 2017-02-14 03:43:09Z

1

You have two problems

(i) Change input type from text to number,

  <div ng-controller="app.invoice" class="container">
  <div ng-repeat="wspStaffTbl in staff_codes">
     {{wspStaffTbl.Staff_Type}}
     <input type="number" ng-model="wspStaffTbl.Permanent" ng-change="updateTotal(wspStaffTbl)">
     <input type="number" ng-model="wspStaffTbl.Contract" ng-change="updateTotal(wspStaffTbl)">
     <input type="number" ng-model="wspStaffTbl.Total">
</div>

(ii) Pass the variable on ng-change and add it to the total,

$scope.updateTotal= function(val){
        val.Total =  val.Permanent + val.Contract;
    }

DEMO

edited Feb 14, 2017 at 3:43

answered Nov 12, 2016 at 9:17

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

2 Comments

sanu Over a year ago

seems to be working but it concat the value instead of adding

sanu Over a year ago

may be it is issue with input type i will check

Sravan · Accepted Answer · 2016-11-12 09:59:37Z

0

As suggested in one answer and taking reference from it, if you take number fields, it is easy to calculate the sum of the fields.

The issue you are getting as you said,

"It working fine but if the fields already have some data (eg. in edit form) it won't update total"

My answer mainly solves your issue which you are facing while editing, to initialize the total values with the values of the input.

This can be solved by initialising the total field using ng-init.

ng-init="updateTotal(code)"

Here is the solved snippet,

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

<div ng-app="myApp" ng-controller="myCtrl">

<div ng-repeat="code in staff_codes">
     <input type="number" ng-model="code.Permanent" ng-change="updateTotal(code)">
     <input type="number" ng-model="code.Contract" ng-change="updateTotal(code)">
     <input type="number" ng-model="code.Total" ng-init="updateTotal(code)">
</div>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.code = {}

  $scope.staff_codes = [{
    name: 'Test',
    Permanent: 10,
    Contract: 20,
    Total:0
  }, {
    name: 'Obama',
    Permanent: 15,
    Contract: 35,
      Total:0
  }, {
    name: 'Trump',
    Permanent: 35,
    Contract: 55,
      Total:0
  }]; 

$scope.updateTotal= function(code){

        code.Total =  code.Permanent + code.Contract

    }


});
</script>

</body>

Here is the fiddle

answered Nov 12, 2016 at 9:59

Sravan

18.7k3 gold badges33 silver badges54 bronze badges

13 Comments

Sravan Over a year ago

who down voted it, and what is the reason for the downvote. I know, downvoters will be ready for the downvote, thats the reason I mentioned everything in my answer, please read the answer once before downvoting it.

Sajeetharan Over a year ago

i did downvote, i dont see any difference from the answer i posted, also you copied and changed the code

Sravan Over a year ago

@Sajeetharan, please read my first line, I mentioned it is from your answer, please be fair.

Sajeetharan Over a year ago

i do accept you mentioned it, but you could have posted this as a comment

Sravan Over a year ago

do you have ng-init in your answer first? you dont have it. I just added it to fulfill his requirement. now you edited and added ng-init after my answer.

|

Collectives™ on Stack Overflow

AngularJS form field in ng-repeat and sum column

2 Answers 2

2 Comments

13 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

13 Comments

Your Answer

Sign up or log in

Post as a guest

Related