Question

我想使用AngularJS过滤器通过regex过滤元素列表（用户将在输入搜索字段中键入正则表达式）。

我写了一些对我来说似乎很有必要的东西，但我无法使正则表达式正常工作。

这是我到目前为止所做的：

View.html

<div ng-controller="listCtrl">
<input type="text" placeholder="search by any" ng-model="search.$">
<input type="text" placeholder="search by fist name" ng-model="search.fname">
<input type="text" placeholder="search by last name" ng-model="search.lname" >
<input type="text" placeholder="search by tel" ng-model="search.tel" >
<input type="text" placeholder="search by date" ng-model="search.date">
<table>
        <tr ng-repeat="user in users|regex : search as res">
           <td>{{user.fname}}</td>
            <td>{{user.lname.toUpperCase()}}</td>
            <td>{{user.tel}}</td>
            <td>{{user.date | date: 'EEE'}}</td>
        </tr>
        <tr ng-if="res.length < 1">
            <td>No elements found...</td>
        </t>
        </table>
</div>

app.js

...
app.filter('regex', function() {

  return function(input, property) {
   var patt;
   var field;
   var out = [];
   if(input === undefined || property === undefined) {
    return out;
  }

  angular.forEach(property, function(key, value) {
   patt = new RegExp(key);   
   field = value;
 });

  for (var i = 0; i < input.length; i++){
    if(patt.test(input[i][eval(field)]))
      out.push(input[i]);
  }      
  return out;
};
});
...

listCtrl只会向$scope添加一些元素。

这里有什么问题？

Answer 1

您应该只能将函数作为ng-repeat过滤器表达式的一部分来调用，即。

然后在你的控制器中你会有类似的东西：

    function textRegEx(row) {
         var regex = new RegExp("row");
         return regex.test(row)
    }

这是整行。你必须使它适应其中一个领域。我今天早些时候在这里发布了一个codepen：http://codepen.io/anon/pen/yOjdJV?editors=1010，下拉列表用于选择您可以调整的字段。显然，如果你在多个字段上启用搜索，你可以将对regex.test的调用连接成一行。

AngularJS：按正则表达式过滤

1 个答案: