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

时间:2018-09-27 14:05:02

标签: angularjs angularjs-ng-repeat

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有一个输入字段。但是在$ctrl.query上使用ng-repeat过滤器时,如果我搜索item,则会对行进行过滤。但是,当清除查询过滤器时,用户在未过滤的行上输入的数据将丢失。如何将输入的数据保留在所有行上,而不管是否过滤?

1 个答案:

答案 0 :(得分:1)

您具有以下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;
});