使用Angular js動態計算數組中值的總和

Question

我正在從事一個名為“黃金貸款管理系統”的項目。 在表格字段中插入飾品名稱和重量。飾品總數和總重量是自動計算的。我無法動態計算總重量。這是我的代碼---

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>

consolecntrl.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 );
          };
        });  

我怎樣才能做到這一點？

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>

consolecntrl.js

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