如何在 Angular js 中创建自定义过滤器答案

【问题标题】：How to create custom filter in angular js如何在 Angular js 中创建自定义过滤器
【发布时间】：2015-09-11 01:55:54
【问题描述】：

我有使用 ng-repeat 填充行的表格。我还有一个输入框可以在表格中搜索。我不想在构建过滤器中使用。我对如何编写将在搜索框中搜索并返回表格行的自定义过滤器感到困惑。此外，如果不显示字符串中匹配的任何内容，我需要搜索以匹配前 4 个字母。例如搜索框说“a124”，那么它应该返回所有具有 a124 作为前四个字符的表行，如果不是，那么默认情况将是在字符串中的任何位置搜索。

<tr ng-repeat ="data in fetchedData></tr>
<th>{{data.name}}</th>
<th>{{data.id}}</th> 
<th>{{data.receivedTime}}</th>

输入框

<input class="form-control" type="text" placeholder="Search..." ng-change="filterColumn()">

控制器代码（我很困惑应该输入什么）

$scope.filterColumn = function {
}

【问题讨论】：

目前还不清楚为什么需要自定义过滤器，或者您甚至尝试过什么。创建自定义过滤器的过程非常有据可查；如果在尝试文档示例之一后遇到问题，您应该考虑更新您的问题。 docs.angularjs.org/guide/filter
ok@Claies 很快就会更新！

标签： angularjs angularjs-filter

【解决方案1】：

您不需要为此使用自定义过滤器。普通的角度过滤器应该没问题。

更改您的输入以绑定到搜索：

<input class="form-control" type="text" placeholder="Search..." ng-model="searchText">

并使用该搜索过滤器来过滤您的 ng-repeat

<tr ng-repeat ="data in fetchedData | filter:searchText"></tr>

【讨论】：

@Priya 过滤器应该从不修改数据，它们必须保持幂等性。
@Claies 它是搜索中任何属性的通配符。然而，它很容易只是搜索模型。我会更新它以使其更清晰:)
@Priya Stack Overflow 不是代码编写服务:)。如果您可以展示您编写自定义过滤器的努力以及它为什么不起作用，特别是如果您捕捉到它背后的业务逻辑，那么您会得到一个更好的答案。
我以前从未见过这种语法，如果能表达出来就好了:)
@Priya Claies 是绝对正确的。过滤器永远不应该修改下面的数据，它们应该只修改当前显示在 DOM 上的内容。修改应该由一个完全独立的事件触发。如果您需要转换数据，您应该在绘制 UI 之前在您的服务中执行此操作。

【解决方案2】：

好的，这是对我有用的解决方案！！我从许多 AngularJS 博客文章中得到了帮助。感谢他们所有人。 `

$scope.filter = function () {
var query = $scope.query.toLowerCase();
 $scope.details = $filter('filter')($scope.data, function(entry) {
        var concatString = '';
        angular.forEach(entry,function(key ,value){
            concatString += key + " ";
        });
         var pattern = new RegExp(query, 'i');
            return (pattern.test(concatString));
      });
    };`

HTML代码：<input ng-model="query" id="filter" class="form-control" type="text" placeholder="Search" ng-change="filter()"> <tr ng-repeat ="data in details"></tr>

【讨论】：

【解决方案3】：

@Priya 我可以在您的代码中看到，您使用 ng-change 来调用过滤器方法。这看起来是从古老的 javascript 方法中调用方法的非常正常的方式。

我建议你使用 angularjs 的使用方式。

例如，

<input type="text" ng-model="letter">
<ul>
  <li ng-repeat="friend in person.friends | startsWithLetter:letter">
    {{ friend }}
  </li>
</ul>

在这里您可以看到 ng-model="letter"，这个名称与名为 startsWithLetter 的过滤器绑定。因此，只要输入框发生变化，就会触发过滤器。

我在这里写了一篇文章给create custom filters using angularjs，各种类型。这对以后阅读此问答部分的其他人很有用。

【讨论】：