angularjs - 具有过滤属性的 ng-repeat 过滤器

Question

我有一个数据列表，我想使用 Angular 的典型过滤来搜索这些数据。

我有一个对象数组(下面几个对象之一):

{
   vendor: 'Joan\'s Produce',
   date: '2014-04-07',
   total: 888.11,
   note: 'insert note',
   description: 'fresh produce',
   terms: 'Net 10',
   deliverer: 'Joe Truck',
   paid: true
}

在<thead>我有输入字段来搜索日期和总计字段。

<th style="vertical-align:text-top; width:250px;">Date<br />
    <div class="input-group input-group-sm">
        <input type="text" class="form-control" ng-model="dateQuery.date" />
        <span class="input-group-addon"><button type="button" class="close" aria-hidden="true" ng-click="dateQuery=''">&times;</button></span>
    </div>
</th>

表格中的数据有自己的过滤器:

<tr ng-repeat="inv in invoices | filter:dateQuery | filter:amountQuery">
    <td>{{inv.date | date:'MM/dd/yyyy'}}</td>...
    <td>{{inv.total | currency}}</td>
</tr>

ng-repeat 中的过滤器格式化日期并将总计更改为货币。当我现在搜索这些过滤器时，它似乎只搜索 ng-repeat 从中提取的原始数据。

有没有办法以搜索过滤结果的方式构建输入过滤器？例如，我必须搜索 2014-04-07 的日期，但无法添加总过滤器中的 $。

I have build a demo here

Answer 1

ng-repeat 上的过滤器只会过滤原始数据，这就是 ng-repeat 的工作原理。要过滤表格数据单元格中过滤器的输出，我可以看到两个选项:

• 将日期和货币的预过滤值附加到您要过滤的对象。为了使事情保持干燥，您可以为此目的在 Controller 或其他地方使用过滤器本身:

  object.currencyFlat = $filter('currency')(object.total);
  

• 构建一个自定义过滤器，动态过滤您在表格中直观显示的值:

  angular.module('myModule').filter('myCurrencyFilter', function($filter) {
      return function(array, text) {
          // Could be more sophisticated
          return array.filter(function(item) {
              return $filter('currency')(item).indexOf(text) !== -1;
          });
      }
  });
  

在这两个中，第一个会更快，因为它只将对象的总计格式化为货币一次。

我认为这两种方法都不是特别漂亮。我很乐意看到更好的解决方案。