Angularjs ng-repeat 查询过滤器清除用户输入值

Angularjs ng-repeat query filter clears user-input values

saleItems = [
  {
    "id": 236,
    "variant": "Oval Holder",
    "mrp": "66.00"
  },
  {
    "id": 237,
    "variant": "Angle Holder",
    "mrp": "52.00"
  }
]

我的模板看起来像:

<input ng-model="$ctrl.query" />
<table>
  <tr><th>Sale Invoice</th></tr>
  <tr>
    <th>No.</th>
    <th>Item.</th>
    <th>Quantity</th>
    <th>Rate</th>
    <th>Discount</th>
    <th>Discount Amount</th>
    <th>Total Amount</th>
  </tr>
  <tr ng-repeat="item in $ctrl.saleItems | filter:$ctrl.query | orderBy:$ctrl.orderProp">
    <td ng-init="item.total_amount=0;item.sale_quantity =0">{{$index + 1}}</a></td>
    <td>{{item.variant}}</td>
    <td><input type="text" value="{{item.sale_quantity}}"></td>
    <td class='amt'>{{item.mrp | currency : "₹" : 2}}</td>
    <td class='amt' >{{item.total_amount | currency : "₹" : 2}}</td>
  </tr>
  <tr><td>{{$ctrl.sale_total_amount()}}</td></tr>
</table>

从上面的模板可以看出,有一个item.sale_quantity的输入框。但是在 ng-repeat 上使用 $ctrl.query 过滤器,如果我搜索 item,行将被过滤。但是当查询过滤器被清除时,用户在未过滤行上输入的数据将丢失。如何在所有行上保留输入的数据,无论是否过滤?

您有以下 init 语句,每次呈现此列时都会清除总计和数量的值。

<td ng-init="item.total_amount=0;item.sale_quantity =0">{{$index + 1}}</a></td>

我建议在使用 for 循环加载数据时在控制器中初始化一次数组。

angular.forEach($scope.saleItems, function(value, key){
  value.total_amount = 0;
  value.sale_quantity  = 0;
});