динамически вычислять сумму значений в массиве с помощью Angular js

Question

Я работаю над проектом под названием «Система управления золотыми кредитами». Form fields to insert the ornament name and weight.Total number of ornaments and total weight is calculated automatically .I Не удалось рассчитать общий вес dynamically.Here мой код ---

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

Как может Я делаю это?

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; 
    };