當從ngRepeat檢查複選框時填充輸入

Question

我試圖用兩種方式填充輸入。第一種方法是簡單地在輸入中輸入數量，這很好地工作。第二種方法（我正在努力）是檢查ngRepeat指令中生成的複選框。

期望的行爲是複選框將從JSON數據中取得item.amount的值，並使用該值填充輸入。下面是標記：

<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()" 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 | currency}}</td> 
     <td class="inv-res6"></td> 
     </tr> 
    </tbody> 
    </table> 

這裏是JavaScript：

myApp.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.total = 0; 
     $scope.invoices.forEach(function(item){ 
      $scope.total += parseFloat(item.payment); 
     }); 
    }; 

    $scope.pushPayment = function(item){ 
     if($scope.checked == 'checked'){ 
      return item.payment; 
     } 
    }; 

}]); 

Answer 1

謝謝，但我想我是得太多它。我需要簡單地添加：

ng-click="item.payment=item.amount" ng-change="getTotal()" 

複選框。我仍然必須將其納入求和函數，但我解決了這個問題。

Answer 2

如果我理解正確的話，你想扳鈕能複選框，如果它被選中，那麼你要複製的發票金額進入下面的輸入框。你可以做類似下面的東西與ng-model組合和ng-change

<tr ng-if="invoices.length" ng-repeat="item in invoices | filter: {status:'Unpaid'}"> 
    <td class="first-cell"> 
     <input type="checkbox" ng-model="item.checked" ng-change="select(item)"/> 
    </td> 
    <td class="inv-res5">$ 
     <input ng-validate="number" type="number" class="input-mini" ng-model="item.payment" step="0.01"/> 
    </td> 
</tr> 

，並添加以下到您的控制器

$scope.select = function(item) { 
    if(item.checked){ 
     item.payment = item.amount; 
    } 
} 

這是什麼應該做的：

• 綁定狀態的複選框到$scope.checked使用ng-model
• 每個ti我調用了複選框狀態更改ng-change，因此調用了selectInvoice。我
• 選擇發票檢查是否複選框被選中並相應地調整了item.payment值綁定到inputsng-model

的工作示例，請參見本Plunker（注抽除的代碼，所以它的唯一的一點我們「重新感興趣

---

順便說一句，你不需要有輸入框呼叫getTotal當它的價值變化。只要改變過去的幾行：

<td class="inv-res4"><h5>Total to pay:</h5></td> 
<td class="inv-res5">{{getTotal() | currency}}</td> 

並修改JavaScript來：

$scope.getTotal = function() { 
    var total = 0; 
    $scope.invoices.forEach(function(item){ 
     total += parseFloat(item.payment); 
    }); 
    return total; 
}; 

它仍然會每隔角時間去約會 '消化'

Answer 3

The Plunker

html：

個

<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-repeat="item in mainCtrl.invoiceList.invoices"> 
     <td class="first-cell"><input type="checkbox" ng-model="item.selected" /></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 type="text" ng-model="mainCtrl.getAmount(item)"/></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">{{mainCtrl.getTotalAmount()}}</td> 
     <td class="inv-res6"></td> 
     </tr> 
    </tbody> 
    </table> 

的JS：

var app = angular.module('plunker', []); 

app.controller('MainCtrl', ['tempDataStorageService', function(tempDataStorageService) { 

    var myCtrl = this; 

    myCtrl.invoiceList = tempDataStorageService; 

    myCtrl.getAmount = function(item){ 
     return item.selected? item.amount : ""; 
    }; 

    myCtrl.getTotalAmount = function(){ 
     var total = 0; 
     for(var i = 0; i < tempDataStorageService.invoices.length; i++){ 
     if(tempDataStorageService.invoices[i].selected){ 
      total = total + tempDataStorageService.invoices[i].amount; 
     } 
     } 
     return total; 
    } 

}]); 


app.factory('tempDataStorageService', function() { 
    // The service object 
    var storage = this; 


    storage.invoices = [{invoiceNum: 1, creationDate: "1/1/16", amount: 1.50, selected: false}, 
         {invoiceNum: 2, creationDate: "1/2/16", amount: 2.50, selected: false}, 
         {invoiceNum: 2, creationDate: "1/2/16", amount: 2.50, selected: false}, 
         {invoiceNum: 3, creationDate: "1/3/16", amount: 3.50, selected: false}, 
         {invoiceNum: 4, creationDate: "1/4/16", amount: 4.50, selected: false}, 
         {invoiceNum: 5, creationDate: "1/5/16", amount: 5.50, selected: false}, 
         {invoiceNum: 6, creationDate: "1/6/16", amount: 6.50, selected: false}, 
         {invoiceNum: 7, creationDate: "1/7/16", amount: 7.50, selected: false}, 
         {invoiceNum: 8, creationDate: "1/8/16", amount: 8.50, selected: false}]; 

    // return the service object 
    return storage; 
}); 

這是做

Answer 4

添加屬性amountToPay到您的發票和發送項目到getTotal功能的方法：

<input ng-validate="number" type="number" class="input-mini" value="{{pushPayment()}}" 
    ng-model="item.amountToPay" ng-change="getTotal(item)" step="0.01" /></td> 

在您的複選框中將ng模型更改爲item.checked：

<input type="checkbox" ng-checked="item.checked" /></td> 

添加到您的getTotal()功能：

$scope.getTotal = function(item) { 
      item.checked = true; 
      $scope.total = 0; 
      $scope.invoices.forEach(function(item){ 
       $scope.total += parseFloat(item.payment); 
      }); 
     }; 

如果您需要填充您的輸入，只需修改amountToPay屬性爲輔助