通过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

看起来像你需要的东西。