How to use Regex with ng-repeat in AngularJs?

Question

I want to use regex in ng-repeat. I have tried the following code but its not working.

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

I have users array and I only want to display the users with type c5.

If I use

filter:{'type':'c5'} 

then its displaying the users with type "ac5x" too, because its contains c5.

How can I solve this problem? Maybe there is another solution.

Thank You!

Answer 1

What tosh mentions should work for you!

If you find yourself wanting to filter by regex more often you can create a custom filter. Something like this fiddle will let you specify a field to check against a regex:

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

Used like this where 'type' indicates the field you are checking against (in this case a field named type):

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

Answer 2

You can use function in filter expression. So basically, you can do any filtering possible with javascript.

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

In controller:

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

Answer 3

Gloopy's answer is spot on. I implemented it in my site but I was getting an error:

'input' is undefined

This occurred because I was sometimes looping over nothing. I fixed this by adding a conditional to return the empty out array if input was undefined.

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

Hopefully this will help someone who might be having the same problem.

Answer 4

Regular expressions are indeed powerful and can handle all kinds of matches including an exact match like ^c5$ .

However, the body of this question reveals that the issue would be addressed by always filtering by exact matches.

You can specify that the Angular filter should use the exact match comparator by setting the 3rd argument to true :

filter:{type:'c5'}:true

Answer 5

Thanks for the regex filter idea but the previous solutions do not work for a general case, like a object case where is a multi level fields.

For example:

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

My solution is:

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

It works for multi level objects or simple object with just one level of attributes.

To late but hope it help you to see from different angle.

This is the code in CoffeeScript, is cleaner:

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