Angular jsを使用して配列内の値の合計を動的に計算する

Question

"Gold loan management system"というプロジェクトに取り組んでいます。 Form fields to insert the ornament name and weight.Total number of ornaments and total weight is calculated automatically .Iは---

index.htmlを

<fieldset data-ng-repeat="choice in choices"> 
<div class="form-group"> 
<select class="form-control" name="optioin" ng-model="choice.option" > 
<option value="Ring">Ring</option> 
<option value="Earings">Earings</option> 
<option value="Chains">Chains</option> 
<option value="Necklaces">Necklaces</option> 
<option value="Bangles">Bangles</option> 
</select> 
</div> 
<div class="form-group"> 
    <input class="form-control" type="number" ng-model="choice.weight" name="" placeholder="Enter the weight">gm 
    <button class="btn btn-default" ng-show="$last" ng-click="removeChoice() "><span class="glyphicon glyphicon-minus" aria-hidden="true"></span></button> 
<button class="btn btn-default" ng-show="$last" ng-click="addNewChoice()"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span></button> 
    </div>  

</fieldset> 
</form> 
<form class="form-inline"> 
<div class="form-group"> 
<label for="totnumber">Total Nos:</label> 
<input type="number" ng-model="choices.length" class="form-control"  id="totnumber"> 
</div> 
    <div class="form-group"> 
<label for="totweight">Total Weight:</label> 
<input type="number" ng-model="total" class="form-control" id="totweight"> 
</div> 
</form> 

dashboardcntrl.js

app.controller('dashboardCtrl', function($scope) { 
    $scope.choices = [{id: 'choice1'}]; 
    $scope.addNewChoice = function() { 
      var newItemNo = $scope.choices.length+1; 
      $scope.choices.push({'id':'choice'+newItemNo}); 
      console.log( $scope. choices.length); 

      }; 

    $scope.removeChoice = function() { 
      var lastItem = $scope.choices.length-1; 
      $scope.choices.splice(lastItem); 
       console.log( $scope. choices.length); 
      }; 
     }); 

どのようにdynamically.Hereが私のコードである総重量を計算することができませんでした私がする？

Answer 1

の代わりに、あなたは次のように、メソッドにバインドすることができます変数に#totweightを結合：

<input type="number" ng-model="getTotalWeight()" class="form-control" id="totweight" disabled="disabled"> 

注：その計算フィールドは、その関数を定義して、コントローラに今disabled

であることをお勧めします

$scope.getTotalWeight = function() { 
    // calculate total weight and return the value 
    // you may want to store it in $scope.total before returning 
} 

Answer 2

@Vivek Athalyeからの参照によって、合計重量を計算して返します。

index.htmlを

<form class="form-inline form-group"> 
    <fieldset data-ng-repeat="choice in choices"> 
    <div class="form-group"> 
    <select class="form-control" name="optioin" ng-model="choice.option" > 
    <option value="Ring">Ring</option> 
    <option value="Earings">Earings</option> 
    <option value="Chains">Chains</option> 
    <option value="Necklaces">Necklaces</option> 
    <option value="Bangles">Bangles</option> 
    </select> 
    </div> 
    <div class="form-group"> 
    <input class="form-control" type="number" step="0.01" ng-model="choice.weight" name="" placeholder="Enter the weight">gm 
    <button class="btn btn-default" ng-show="$last" ng-click="removeChoice() "></button> 
    <button class="btn btn-default" ng-show="$last" ng-click="addNewChoice()"></button> 
     </div> 
     </fieldset> 
     </form> 

       <div class="col-md-6"> 
        <p class="text-left"> Total Numbers:{{ choices.length}}   </p> </div>  <div class="col-md-6"> 
        <p >Total Weight: {{total(number)}}gm</p> 
       </div> 
       </div> 

dashboardcntrl.js

$scope.total=function(){ 
var tot=0; 
for(i=0;i<$scope.choices.length;i++) 
tot= $scope. choices[i].weight+ tot; 
return tot; 
    };