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

Question

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

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

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

如果我使用

filter:{'type':'c5'} 

它显示了类型为 "ac5x" 的用户，因为它包含 "c5"。如何解决这个问题？也许还有其他解决方案。谢谢！

- Vural

---

我不熟悉AngularJs，但是在这里指出过滤器表达式可以接受一个函数。 - inhan

Answer 1

应该会有用的是tosh所提到的内容！

如果您发现自己更经常地想按正则表达式进行过滤，则可以创建自定义过滤器。类似这个代码片段，将允许您指定一个字段来根据正则表达式进行检查：

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>

- Gloopy

Answer 2

你可以在筛选表达式中使用函数。基本上，你可以用JavaScript实现任何可能的过滤。

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

在控制器中：

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

- Tosh

Answer 3

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

希望这能帮助到遇到相同问题的人。

- Iain529

Answer 4

正则表达式确实很强大，可以处理各种匹配，包括精确匹配，例如^c5$。

然而，问题的内容揭示了应该通过始终过滤精确匹配来解决问题。

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

filter:{type:'c5'}:true

- Colin

Answer 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

- nahualli