從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-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;
    }
}

這應該做什么：

• 您使用ng-model將復選框的狀態綁定到$scope.checked
• 每次復選框狀態更改ng-change被調用，因此selectInvoice被調用。
• 選擇發票檢查是否已選中復選框並相應地調整綁定到inputs ng-model的item.payment值

請參閱此Plunker的工作示例（請注意，我對代碼進行了細化，因此我們只對它感興趣

---

getTotal當值更改時，不需要讓輸入框調用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;
};

每次Angular的“消化”都將是最新的

Answer 2

柱塞

的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 3

在發票中添加一個屬性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-model更改為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屬性

Answer 4

感謝您的協助，但我想我想得太多了。 我只需添加以下內容即可：

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

到復選框。 我仍然必須將此合並到sum函數中，但是我解決了這個問題。