Question

我有使用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 {
}

Answer 1

您不需要为此设置自定义过滤器。普通角度滤波器应该可以正常工作。

将输入更改为绑定到搜索：

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

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

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

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

Answer 3

@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的过滤器绑定。因此，只要输入框发生变化，就会触发过滤器。

我在这里以各种类型向create custom filters using angularjs写了一篇文章。这对将来阅读此Q＆amp; A部分的其他人非常有用。

如何在角度js中创建自定义过滤器

3 个答案: