3

我对 AngularJS 很陌生，并且遇到了一些我自己似乎无法弄清楚的事情。我正在开发发票应用程序，当我返回一个值和一个 ng-model 时，该值正在计算中，但从未在 DOM 中设置。然后它又永远不会更新我要计算的小计。

行控制器.cshtml

<tr id="row-{{$index+1}}" class="item-row" ng-repeat="item in itemRows">
    <td><input type="text" class="text-right" placeholder="$0.00" ng-model="hrsQty" /></td>
    <td><input type="text" class="text-right" placeholder="$0.00" ng-model="ratePrice" /></td>
    <td><input type="text" class="text-right" placeholder="$0.00" value="{{rowTotal(hrsQty, ratePrice) | currency}}" ng-model="amountSum[$index]" /></td>
</tr>

这段代码采用 hrsQty * ratePrice 并将其值返回到最后一个输入文本中。返回的值将通过for循环发送

控制器.js

function InvoiceController($scope) {
$scope.itemRows = [0, 1, 2, 3, 4];
$scope.hrsQty;
$scope.ratePrice;
$scope.amountSum = [];
$scope.subTotal;

$scope.rowTotal = function (hrsQty, ratePrice) {
    return hrsQty * ratePrice;
};

$scope.subTotal = function () {
    var sum = 0;

    for (var i = 0, v; v = $scope.amountSum[i]; i++) {
        sum += +v;
    }
    return sum;
};
}

如果我删除 ng-model，那么我的计算会完美返回，但如果我将 ng-model 放回并删除，value="{{rowTotal(hrsQty, ratePrice) | currency}}"那么我的小计计算效果很好。当这两者结合在一起时，value="{{rowTotal(hrsQty, ratePrice) | currency}}"它永远不会在 DOM 中设置或被删除。

在此处输入图像描述

任何帮助将不胜感激。

4

1 回答 1

1

我假设您不需要 ng-model 而只是显示一些价值。ng-model应该用于允许用户更改模型中的某些内容。

所以检查这个解决方案： http ://plnkr.co/edit/eo37EXog0FWVr1lTn1Cw?p=preview

看起来像你需要的东西。

于 2013-04-11T18:31:36.340 回答