Angularjs 使用已过滤属性的ng重复过滤器

我有一个数据列表，我想通过Angular的典型过滤进行搜索

我有一个对象数组（以下几个对象之一）：

在

中，我有输入字段来搜索日期和总数字段

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

{{inv.date}日期：'MM/dd/yyyy'}。。。
{{投资总额|货币}

ng repeat

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

是否有一种方法来构建输入过滤器，使其能够搜索过滤后的结果？例如，我必须用2014-04-07搜索日期，并且不能在总数过滤器中添加$

---

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

在这两种方法中，第一种方法要快得多，因为它只将对象的总数格式化为货币一次

---

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

我最终利用下划线.js在scope对象上运行

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>

{{inv.filteredDate}
{{inv.vendor}}
{{inv.filteredTotal}
{{inv.terms}

您是否会构建其他内容以循环通过

$scope.invoices

来构建“干”数据？是的，您必须将此数据附加到for循环或控制器中的某个内容中，以便您的对象在

$scope.invoices

中同时具有

currencyFlat

属性和

currencyFlat

。你可以过滤

currencyFlat

，但显示

currencyFlat

（如果它们完全相同，你也可以显示预格式化（过滤）的

currencyFlat

值）。你的解决方案是我最终所做工作的催化剂，请参阅我的答案。您需要在控制器中预筛选原始数据，以便

发票

包含您需要筛选的数据。或者，创建一个自定义筛选器，从筛选器键中删除

$

。

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