Question

我正在尝试使用ng-repeat创建一个填充未付发票列表的原型。在此，我正在为每张发票创建一个输入。我希望能够在这些输入中输入$ amount，然后显示所有输入的总数。离开这个例子：http://jsfiddle.net/d5ug98ke/9/我无法像小提琴一样工作。这是我的代码：

<table class="table table-striped header-fixed" id="invoiceTable">
        <thead>
          <tr>
            <th class="first-cell">Select</th>
            <th class="inv-res2">Invoice #</th>
            <th class="inv-res3">Bill Date</th>
            <th class="inv-res4">Amount</th>
            <th class="inv-res5">Amount to Pay</th>
            <th class="inv-res6"></th>
          </tr>
        </thead>
        <tbody>
          <tr ng-if="invoices.length" ng-repeat="item in invoices | filter: {status:'Unpaid'}">
            <td class="first-cell"><input type="checkbox" /></td>
            <td class="inv-res2"><a href="invoices/{{item.invoiceNum}}">{{item.invoiceNum}}</a></td>
            <td class="inv-res3">{{item.creationDate}}</td>
            <td class="inv-res4" ng-init="invoices.total.amount = invoices.total.amount + item.amount">{{item.amount | currency}}</td>
            <td class="inv-res5">$
              <input ng-validate="number" type="number" class="input-mini" ng-model="item.payment" ng-change="getTotal()" min="0" step="0.01"  /></td>
          </tr>
        </tbody>
      </table>
      <table class="table">
        <tbody>
          <tr class="totals-row" >
            <td colspan="3" class="totals-cell"><h4>Account Balance:&nbsp;<span class="status-error">{{invoices.total.amount | currency }}</span></h4></td>
            <td class="inv-res4"><h5>Total to pay:</h5></td>
            <td class="inv-res5">${{total}}</td>
            <td class="inv-res6"></td>
          </tr>
        </tbody>
      </table>

和Angular：

myBirkman.controller('invoiceList', ['$scope', '$http', function($scope, $http) {
        $http.get('assets/js/lib/angular/invoices.json').success(function(data) {
            $scope.invoices = data;
        });

        $scope.sum = function(list) {
             var total=0;
             angular.forEach(list , function(item){
                total+= parseInt(item.amount);
             });
             return total;
        };



        $scope.total = 0;
        $scope.getTotal = function() {
            $scope.invoices.forEach(function(item){
                $scope.tot += parseInt(item.payment);
            });
        };
    }]);

任何帮助将不胜感激。如果有人有更好的想法，我不一定需要在小提琴中使用该方法。

Answer 1

似乎有两个问题。首先是一个简单的拼写错误：

$scope.tot += parseInt(item.payment, 10);

应该是

$scope.total += parseInt(item.payment, 10);

您还应该在$scope.total的开头将getTotal()重置为0.

编辑：按照您的方式进行操作，您始终需要记住在更改内容时更新总计。相反，您可以让getTotal返回总数并在模板中写下{{ getTotal() }}。您不必在via getTotal()中触发ng-change。如果你没有很多投入，你不应该担心这里的表现。

ng-repeat中的输入总和

1 个答案: