如何使用 Angular 搜索显示的数据而不是支持数据

Question

我正在使用 ng-repeat 创建一个 table 数据：

<div class="divTable" ng-repeat="expense in exp.expenses | filter:exp.query">
    <div>{{expense.amount | ldCurrency : true}}</div>
     ...
</div>

我正在创建的几个单元格正在通过 Angular filter 进行修改。在上面的示例中，我将 integer 更改为一种货币。所以将原来的4改为.00。当我 filter 整个列表与我的 exp.query 时，它不会通过 ldCurrency.

修改 exp.query 搜索词

意思是如果我在</code>上搜索，它不会找到它，因为支持数据是<code>4，即使在页面上。

我知道这很令人困惑，因为我在这里谈论的是两种类型的过滤器。

如何搜索页面上显示的数据而不是支持数据？

Answer 1

您必须创建自己的过滤器。你想要做的是一个坏主意，因为你正在融合视图层和模型层。

过滤器示例。

html:

<input ng-model="query" ng-trim="true">
<span>Finding: </span><span>{{ query }}</span>
<div ng-repeat="product in products | productsFilter: query">
  <strong>{{ $index }}</strong>
  <span>{{ product.name }}</span>
  <span>{{ product.price | currency: '$'}}</span>
</div>

自定义过滤器：

.filter('productsFilter', [function () {

  // Private function: It removes the dollar sign.
  var clearQuery = function (dirtyQuery) {

    var index = dirtyQuery.indexOf('$');

    if (index === -1) 
      return dirtyQuery; 

    return dirtyQuery.substr(index+1, dirtyQuery.length-index)
  };

  // The Custom filter
  return function (products, query) {

    if (query === '') return products;

    var newProducts = [];

    angular.forEach(products, function (product) {

      var cleanQuery       = clearQuery(query);
      var strProductPrice  = '' + product.price;
      var index            = strProductPrice.indexOf(cleanQuery);

      if (index !== -1) {
        newProducts.push(product); 
      }
    });

    return newProducts;
  };
}]);

关键在angular.forEach。在那里我决定产品是否属于新过滤的集合。在这里你可以做你想做的比赛。

您可以在 full plucker example and see a lot of filters in the a8m's angular-filter

中找到完整的示例

如何使用 Angular 搜索显示的数据而不是支持数据

How to search on the displayed data and not the backing data using Angular

filtering

angularjs