dynamically calculate sum of values in an array using Angular js

Question

I am working on a project called "Gold loan management system". Form fields to insert the ornament name and weight.Total number of ornaments and total weight is calculated automatically .I Couldn't calculate the total weight dynamically.Here is my code---

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

How can i do that?

Answer 1

Instead of binding #totweight to a variable you can bind it to a method, like:

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

Note: Its recommended that the calculated fields are disabled

Now in your controller define a function that calculates and returns the total weight, like:

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

Answer 2

By the reference from @Vivek Athalye Solved the problem.

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