如何在 AngularJs 中使用正则表达式和 ng-repeat？答案

【问题标题】：How to use Regex with ng-repeat in AngularJs?如何在 AngularJs 中使用正则表达式和 ng-repeat？
【发布时间】：2012-08-21 00:18:00
【问题描述】：

我想在 ng-repeat 中使用正则表达式。我已经尝试了以下代码，但它不起作用。

<div ng-repeat="user in users | filter:{'type':/^c5$/}"></div>

我有用户数组，我只想显示类型为 c5 的用户。

如果我使用

filter:{'type':'c5'}

然后它也显示类型为“ac5x”的用户，因为它包含 c5。

我该如何解决这个问题？也许还有其他解决方案。

谢谢！

【问题讨论】：

我对AngularJs不熟悉，但in here it states过滤器表达式可以带一个函数。

标签： javascript regex frameworks angularjs

【解决方案1】：

什么 tosh 提到应该对你有用！

如果您发现自己想要更频繁地使用正则表达式进行过滤，您可以创建一个自定义过滤器。像this fiddle 这样的东西会让你指定一个字段来检查正则表达式：

var myApp = angular.module('myApp', []);
myApp.filter('regex', function() {
  return function(input, field, regex) {
      var patt = new RegExp(regex);      
      var out = [];
      for (var i = 0; i < input.length; i++){
          if(patt.test(input[i][field]))
              out.push(input[i]);
      }      
    return out;
  };
});

这样使用，'type' 表示您正在检查的字段（在本例中为名为 type 的字段）：

<div ng-repeat="user in users | regex:'type':'^c5$'"></div>

【讨论】：

【解决方案2】：

您可以在过滤器表达式中使用函数。所以基本上，您可以使用 javascript 进行任何可能的过滤。

<li ng-repeat="name in names | filter:myFilter"> {{ name }}

在控制器中：

$scope.myFilter = function(user) {
   return /^c5$/.test(user.type);
};

【讨论】：

【解决方案3】：

正则表达式确实很强大，可以处理各种匹配，包括像^c5$这样的完全匹配。

但是，此问题的正文表明，该问题将通过始终按完全匹配进行过滤来解决。

您可以通过将第三个参数设置为true 来指定Angular 过滤器应该使用精确匹配比较器：

filter:{type:'c5'}:true

【讨论】：

【解决方案4】：

Gloopy 的回答很到位。我在我的网站中实现了它，但我收到了一个错误：

'input' is undefined

发生这种情况是因为我有时什么都没有循环。如果input 未定义，我通过添加一个条件以返回空的out 数组来解决此问题。

var myApp = angular.module('myApp', []);
myApp.filter('regex', function() {
  return function(input, field, regex) {
      var patt = new RegExp(regex);      
      var out = [];

      if(input === undefined) {
          return out;
      }

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

希望这对可能遇到同样问题的人有所帮助。

【讨论】：

【解决方案5】：

感谢正则表达式过滤器的想法，但以前的解决方案不适用于一般情况，例如多级字段的对象情况。

例如：

<div ng-repeat="item in workers | regex:'meta.fullname.name':'^[r|R]' ">

我的解决办法是：

.filter('regex', function() {
  return function(input, field, regex) {
    var f, fields, i, j, out, patt;
    if (input != null) {
      patt = new RegExp(regex);
      i = 0;
      out = [];
      while (i < input.length) {
        fields = field.split('.').reverse();
        j = input[i];
        while (fields.length > 0) {
          f = fields.pop();
          j = j[f];
        }
        if (patt.test(j)) {
          out.push(input[i]);
        }
        i++;
      }
      return out;
    }
  };
});

它适用于多级对象或仅具有一级属性的简单对象。

来晚了，但希望它可以帮助您从不同的角度看。

这是 CoffeeScript 中的代码，更简洁：

angular.module('yourApp')
    .filter 'regex', ->
        (input, field, regex) ->
            if input?
                patt = new RegExp(regex)
                i = 0
                out = []
                while i < input.length
                    fields = field.split('.').reverse()
                    j = input[i]
                    while fields.length > 0
                        f = fields.pop()
                        j = j[f]
                    if patt.test(j)
                        out.push input[i]
                    i++
                return out

【讨论】：