How to add the values which is present inside the array (or) Json?

Question

I been wondering if someone fixed my issue. my code looks like this.

var app = angular.module('myApp', []);
app.controller('myCtrl',function($scope){
 //Adding New Check# and Check amount Text Boxes
         $scope.checks = [{checkNum1: '',checkAmt1:''}];


             $scope.add = function() {
               var newCheckNo = $scope.checks.length+1;
               $scope.checks.push({['checkAmt'+newCheckNo]:''});
             };
             
             $scope.tot = function() {
             		return  $scope.checks;
             };
             
             $scope.total = function() {
             		var value = "";
                	for(var i =0 ; i<=$scope.checks.length;i++ ){
                  		value += $scope.checks.get('checkAmt1');
                  }
                return value;
             };

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<div class="col-md-12">
<div class="col-md-6">
         <div ng-repeat="check in checks">
               <div class="form-group">
              <label>check Amount:</label>
               <div class="col-md-5">
                <input type="text" class="form-control" id="{{'id'+($index+1)}}" ng-model="check['checkAmt'+($index+1)]" maxlength="6" />
               </div>
               </div>
             </div>
             <button type="button"
              ng-click="add()">Add More</button>
            </div>
</div>
<div class="col-md-6">
   <!--<p ng-repeat="check in checks">{{check['checkAmt'+($index+1)]}}</p>-->
</div>
  <label>{{tot()}}</label>
  <label>{{total()}}</label>
</div>

I am initializing $scope.checks = [{checkAmt1:''}]; and pushing the additional values on clicking Add Button (checkAmt2,checkAmt3,...so on). i want to add those values(checkAmt1+checkAmt2+...so on) dynamically by using {{total()}}. total() function is calling, i know logic inside the for loop is wrong. Please help me to fix the logic (or) Suggest me if any other way to add those values.

Thanks in advance.

Note: please refer the result in full page view.

Answer 1

first of all, it is not a proper way of using an array. You can sum up column with same name and not dynamic name.

I think to make the entries distinct you have used in such manner. But it is not the good way and will make your operation on array complicated.

You can try to construct array in following way,

 $scope.checks = [{id:'',checkNum: '',checkAmt:''}];

The complete changed code will look like

var app = angular.module('myApp', []);
app.controller('myCtrl',function($scope){
 //Adding New Check# and Check amount Text Boxes
         $scope.checks = [{id:'', checkAmt:''}];


             $scope.add = function() {
               var newCheckNo = $scope.checks.length+1;
               $scope.checks.push({'id':newCheckNo ,'checkAmt':''});
             };
             
             $scope.tot = function() {
               return  $scope.checks;
             };
             
             $scope.total = function() {
               var value = 0;
                 for(var i =0 ; i<$scope.checks.length;i++ ){
                    value += parseInt( $scope.checks[i].checkAmt);

                  }
                return value;
             };

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<div class="col-md-12">
<div class="col-md-6">
         <div ng-repeat="check in checks">
               <div class="form-group">
              <label>check Amount:</label>
               <div class="col-md-5">
                <input type="text" class="form-control" id="{{'id'+($index+1)}}" ng-model="check['checkAmt']" maxlength="6" />
               </div>
               </div>
             </div>
             <button type="button"
              ng-click="add()">Add More</button>
            </div>
</div>
<div class="col-md-6">
   <!--<p ng-repeat="check in checks">{{check['checkAmt']}}</p>-->
</div>
  <label>{{tot()}}</label>
  <label>{{total()}}</label>
</div>

Answer 2

I'm not sure why indeed you push into the array such objects, and not just numbers, but as you iterate over it - you can just access each value by index, then take the correct object's value:

for(var i =0 ; i<=$scope.checks.length;i++ ){
   value += $scope.checks[i]['checkAmt' + i];
}