Question

我正在尝试计算总余额ng-repeat，这取决于ng-change内的ng-repeat。

我的表格看起来像这样

<table>
    <tr>
        <td>Total - total is {{tot}}</td>
    </tr>

    <tr ng-repeat="obj in Array">
         <td>
            <input ng-change="getValue(obj.Cost);" ng-model="obj.Quantity" type="number">
         </td>
        <td>
            <span ng-model="obj.ListPrice">{{obj.ListPrice}}</span>
        </td>
        <td> 
            <input type="number" ng-value="obj.Cost = obj.Quantity * obj.ListPrice">
        </td>
    </tr>
</table>

现在我正在计算总数

var total = 0;
$scope.getValue = function(Cost){
    total += parseInt(Cost);
    $scope.tot = total
}

没有发生。什么是正确的方法？

Answer 1

您可以像这样访问ng-repeat以外的总数

<span>Total is - {{total}}</span>    
<table>
    <tbody ng-init="total = 0">
    <tr ng-repeat="obj in Array">
         <td>
            <input ng-change="getValue(obj.Cost);" ng-model="obj.Quantity" type="number">
         </td>
        <td>
            <span ng-model="obj.ListPrice">{{obj.ListPrice}}</span>
        </td>
        <td ng-init="$parent.total = $parent.total + (obj.Quantity * obj.ListPrice)"> 
            <input type="number" ng-value="obj.Cost = obj.Quantity * obj.ListPrice">
        </td>
    </tr>
</table>

基本上你在ng-repeat内进行总结并在ng-init中进行tbody，这样你就可以访问total以外的ng-repeat

Answer 2

我的代码存在一些问题，我可以在glace中看到。

<强>第一

<span ng-model="obj.ListPrice">{{obj.ListPrice}}</span>

您在跨度上使用ng-model是不行的。您可以从official documentation了解相关信息。

<强>第二

<input type="number" ng-value="obj.Cost = obj.Quantity * obj.ListPrice">

您正在指定将值obj.Cost分配给ng-value的操作。我只能希望你理解这一点，我不确定是否有更好的方式来描述它。

我相信你想要实现的是这个

<input type="number" 
       ng-init="obj.Cost = obj.Quantity * obj.ListPrice" 
       ng-value="obj.Cost" />

Answer 3

您的代码无法运行，因为在它计算obj.Cost之前，ng-change会被触发，您将获得Cost的陈旧/旧值。所以，相反，你可以这样做：

$scope.getValue = function() {
  $scope.total = 0
  $scope.myArray.forEach(function(arr) {
    $scope.total += arr.Quantity * arr.ListPrice
  })
}

您的input将是：

<td>
  <input ng-change="getValue()" ng-model="obj.Quantity" type="number">
</td>

这是工作代码段：

＆＃13;

var app = angular.module('myApp', []);
app.controller("myCtrl", function($scope) {
  $scope.myArray = [{
    Quantity: "",
    ListPrice: 100
  }, {
    Quantity: "",
    ListPrice: 200
  }]

  var total = 0;
  $scope.getValue = function(obj) {
    $scope.total = 0
    $scope.myArray.forEach(function(arr) {
      $scope.total += arr.Quantity * arr.ListPrice
    })
  }
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.js"></script>

<body ng-app="myApp">
  <div ng-controller="myCtrl">

    <table>
      <tr>
        <td>Total - total is {{total}}</td>
      </tr>

      <tr ng-repeat="obj in myArray">
        <td>
          <input ng-change="getValue(obj);" ng-model="obj.Quantity" type="number">
        </td>
        <td>
          <span ng-model="obj.ListPrice">{{obj.ListPrice}}</span>
        </td>
        <td>
          <input type="number" ng-value="obj.Cost = obj.Quantity * obj.ListPrice">
        </td>
      </tr>
    </table>
  </div>

</body>

＆＃13;

计算外部ng重复的总数

3 个答案: