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搜索日期，并且可以＆＃39; t在总过滤器中添加$。

I have build a demo here

Answer 1

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

将日期和货币的预过滤值附加到您要过滤的对象。为了保持干燥，您可以在控制器或其他地方使用过滤器本身：
```
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;
        });
    }
});

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

我认为这些方法都不是特别漂亮。我很想看到更好的解决方案。

Answer 2

我最终利用Underscore.js在范围对象上运行foreach循环

_.each($scope.invoices, function (invoice) {
    invoice.filteredDate = $filter('date')(invoice.date, 'MM/dd/yyyy');
    invoice.filteredTotal = $filter('currency')(invoice.total, '$');
});

然后引用我的HTML中的新字段

<tr ng-repeat="inv in invoices | orderBy:predicate:reverse | filter:dateQuery | filter:totalQuery">
    <td>{{inv.filteredDate}}</td>
    <td>{{inv.vendor}}</td>
    <td>{{inv.filteredTotal}}</td>
    <td>{{inv.terms}}</td>
    <td class="center"><input type="checkbox" ng-model="inv.paid" disabled /></td>
    <td class="center">
        <a ng-click="invoice(inv, $index)"><i class="fa fa-edit"></i></a>
    </td>
</tr>

带有过滤属性的ng-repeat过滤器

2 个答案: