Question

我正在开展一个名为“黄金贷款管理系统”的项目。Form fields to insert the ornament name and weight.Total number of ornaments and total weight is calculated automatically。我无法动态计算总重量。这是我的代码---

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

使用Angular js动态计算数组中的值之和

2 个答案: