Angularjs 如何在angular js中创建自定义过滤器

我有一个表，其中的行使用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-model="searchText">

并使用该搜索筛选器筛选您的ng repeat

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

---

好的，这就是对我有效的解决方案！！我从许多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代码：

---

@Priya我可以在你的代码中看到，你使用了ng change来调用filter方法。这看起来是从古代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的过滤器绑定。因此，只要输入框发生变化，就会触发过滤器

在这里，我写了一篇不同类型的文章。

---

这对以后阅读本问答部分的其他人很有用。

@Priya筛选器永远不应该修改数据，它们必须保持幂等。@Claies它是搜索中任何属性的通配符。不过，它很可能只是搜索模型。我会更清楚地更新：）@Priya Stack Overflow不是一个代码编写服务：）。如果您能展示您编写自定义筛选器的努力以及它不起作用的原因，特别是如果您捕获了它背后的业务逻辑，那么您将得到一个更好的答案。我以前从未见过使用过这种语法，最好能表达出它的功能：）@Priya Claies绝对正确。过滤器不应该修改下面的数据，它们应该只修改DOM上当前显示的内容。修改应由完全独立的事件触发。如果您需要转换数据，您应该在绘制UI之前在您的服务中进行转换。现在还不清楚为什么需要自定义过滤器，或者您是否尝试过。创建自定义过滤器的过程有很好的文档记录；在尝试了一个文档示例后，如果您遇到问题，应考虑更新问题。ok@Claies将很快更新！

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

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