1

我正在尝试以两种方式填充输入。第一种方法是简单地在输入中输入一个金额，这非常有效。第二种方法（我正在努力）是检查 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;
        }
    };  

}]);
4

4 回答 4

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

这应该做什么：

  • 您将复选框的状态绑定到$scope.checked使用ng-model
  • 每次复选框状态更改时ng-change都会调用，因此selectInvoice会调用。
  • 选择发票检查复选框是否被选中并相应地调整item.payment绑定到inputs ng-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;
};

每次Angular“消化”时它仍然是最新的

于 2016-02-05T16:38:30.793 回答
0

笨蛋

的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;
});

这是一种方法

于 2016-02-05T17:03:23.083 回答
0

将属性添加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属性

于 2016-02-05T18:18:05.633 回答
0

感谢您的帮助，但我想我想多了。我必须简单地添加：

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

到复选框。我仍然必须将它合并到 sum 函数中，但我解决了这个问题。

于 2016-02-05T20:18:10.103 回答