配列（または）内にある値を追加するには？Json？

Question

誰かが私の問題を修正したのかどうか疑問に思っていました。私のコードはこのように見えます。

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() { 
 
       \t \t return $scope.checks; 
 
      }; 
 
       
 
      $scope.total = function() { 
 
       \t \t var value = ""; 
 
       \t for(var i =0 ; i<=$scope.checks.length;i++){ 
 
        \t \t 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>

私は（、checkAmt2、checkAmt3 ...上に）$scope.checks = [{checkAmt1:''}]; を初期化し、ボタンを追加]をクリックする上で追加の値をプッシュしています。私は{{total()}}を使ってそれらの値（checkAmt1+checkAmt2+ ...など）を動的に追加したいと思います。 total()関数が呼び出されている、私はループ内のロジックが間違っていることを知っている。ロジックを修正するのを手伝ってください（または）それらの値を追加する他の方法があれば私に提案してください。

ありがとうございます。

注：結果をフルページビューで参照してください。

Answer 1

まず、配列を使用する適切な方法ではありません。 動的名ではなく、同じ名前の列を集計できます。

このようにして使用したエントリを区別すると思います。しかし、それは良い方法ではなく、配列の操作を複雑にします。

あなたは完全なコードがなぜあなたは{ `checkAmtXを推進している

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

確かにあなたは、配列などのオブジェクトだけではなく、数字の中に押し込み、なぜ私はわからないんだけど、あなたはそれを反復として - あなただけの正しいオブジェクトの値をとり、その後、インデックスによってそれぞれの値にアクセスすることができます。

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