ng-model AngularJS 在 DOM 中清除值

Question

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

rowController.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 循环发送

Controller.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 中设置或被删除。

任何帮助将不胜感激。

Answer 1

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

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

看起来像你需要的东西。