2013-04-11 56 views
3

我對AngularJS非常陌生,並且遇到了一些我自己無法想象的東西。我正在開發一個發票應用程序,當我返回一個值和一個ng模型時,這個值正在計算中,但從未在DOM中設置。然後,它又不會更新我正在計算的小計。ng-model在DOM中清除的值AngularJS

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-模型,然後我的計算回報完美,但如果我把NG-模型回在和刪除value="{{rowTotal(hrsQty, ratePrice) | currency}}"然後我的小計計算很好。當兩者結合在一起時,value="{{rowTotal(hrsQty, ratePrice) | currency}}"從未在DOM中設置或正在被刪除。

enter image description here

任何幫助將不勝感激。

+2

應該將amountSum字段進行編輯或僅用於信息目的? – 2013-04-11 18:13:30

+0

這是我仍然需要改變的東西。它將是隻讀的。 – 2013-04-11 18:20:15

回答

1

我假設你不需要ng模型,只是顯示一些價值。 ng-model應該用於允許用戶更改模型中的某些內容。

因此,檢查該解決方案: http://plnkr.co/edit/eo37EXog0FWVr1lTn1Cw?p=preview

看起來你需要的東西。

+0

完美的工作!非常感謝!! – 2013-04-11 19:09:14

+0

我一直在搞plnkr解決方案,並得到所有實施到我的解決方案。當我輸入第一個字段33.33和第二個字段3時,subTotal和rowTotal是不同的。我該如何解決這個問題?此外| 0是什麼意思?謝謝! – 2013-04-11 22:41:22

+0

我發現了這個 - http://jsfiddle.net/slav123/75m7e/3/ 我編輯了我的.js和代碼來遵循這個例子,現在我能夠找回正確的結果。再次感謝@Valentyn – 2013-04-12 00:05:31