如何对 AngularJS 中的多个字段求和并在跨度中显示结果？答案

【问题标题】：How to sum many fields in AngularJS and show the result in an span?如何对 AngularJS 中的多个字段求和并在跨度中显示结果？
【发布时间】：2017-05-14 23:24:10
【问题描述】：

下面的脚本显示了一个使用 ng-repeat 的计算形式。

计算重复元素总价最简单的方法是什么？

页面html：

<tr ng-repeat="ligne in data">
          <!-- <td ng-bind="$index+1"></td> -->
           <td>
             <input class="form-control input-sm" type="text" ng-show="show==0" ng-model="designation">
             <span ng-show="show==1">{{designation}}</span>
           </td>
           <td>
             <input class="form-control input-sm" type="number" ng-show="show==0" ng-change="getTotal(prixHt,quantite)" ng-model="prixHt">
             <span ng-show="show==1">{{prixHt}}</span>
           </td>
           <td>
           <input class="form-control input-sm"  type="number" ng-show="show==0" ng-change="getTotal(prixHt,quantite)" ng-model="quantite">
             <span ng-show="show==1">{{quantite}}</span>
           </td>
           <td>
             <select class="form-control input-sm" type="text" ng-show="show==0" ng-change="getTotal(prixHt,quantite)"  ng-model="tva">
               <option value="20" selected>20%</option>
               <option value="0">0</option>
             </select>
             <span ng-show="show==1">{{tva}}</span>
           </td>
           <td>
             <input class="form-control input-sm" type="text" ng-show="show==0" value="{{(prixHt * 1) * (quantite * 1)}}" id="data.totalht" disabled="true" />
             <span ng-show="show==1">{{(prixHt * 1) * (quantite * 1)}}</span>
           </td>
           <td>
            <input class="form-control input-sm" type="text" ng-show="show==0" value="{{((prixHt * 1) * (quantite * 1)) * ((100+tva*1) / 100)}}" disabled="true">
             <span ng-show="show==1">{{((prixHt * 1) * (quantite * 1)) * ((100+tva*1) / 100)}}</span>
           </td>
           <td ng-show="show==0">
           </td>
          </tr>
///////////////////////////////////////////////////////////////////////

<span class="col-md-4" ng-bind="total"></span>

///////////////////////////////////////////////////////////////////////

我的控制器代码：

$scope.getTotal = function(prixHt,quantite){

    var total = 0;
    for(var i = 0; i < $scope.data.length; i++){
      //  var product = $scope.data[i];
        total += (prixHt * quantite)*1;
        $scope.total =total;
    }
    return total;

}
///////////////////////////////////////////////////////////////////////

感谢帮助

【问题讨论】：

data 的值是多少？更新帖子。
您想要调用getTotal 方法或其他方式的最佳位置吗？
Julien TASSIN 问题是我的函数返回错误总计，我想要解决方案来计算数组中每个元素的小计，！如果您有其他解决方案，我会很高兴！
这个重复没有任何意义；你正在做ligne in data，但没有使用ligne 做任何事情。最重要的是，您在这里绑定到原语，由于scope inheritance 与ng-repeat 的问题，这将无法按您期望的方式工作。基本上这些绑定都没有连接到data 或控制器。

标签： angularjs

【解决方案1】：

在您的 ng-repeat 之前设置一个范围变量，如下所示：

{{total = 0;""}}

然后将所有价格汇总到 ng-repeat：

{{total += prixHt * quantite;""}}

希望对你有帮助

【讨论】：