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

这应该做什么：

使用$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＆＃39;消化＆＃39;

时，它仍然是最新的

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

4 个答案: