从 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 被调用。
Select 发票检查复选框是否被选中并相应地调整绑定到 inputs ng-model

item.payment

查看此 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;
};

每次都会更新Angular'digests'

Answer 2

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 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 函数中，但我解决了这个问题。

从 ngRepeat 选中复选框时填充输入

Populate an input when checkbox is checked from ngRepeat

javascript

angularjs

angularjs-ng-checked