AngularJs, filter case insensitive

Question

I've got an json full of datas with lowcase and upcase. For example :

[

  { "firstName":"JoHn" , "lastName":"DoE" }, 
  { "firstName":"aNnA" , "lastName":"smIth" }, 
  { "firstName":"PeTer" , "lastName":"JOnes" }

]

And I've got something similar to this :

Search: <input ng-model="searchText">
        <table id="searchTextResults">
          <tr><th>Name</th><th>Phone</th></tr>
          <tr ng-repeat="friend in friends | filter:searchText">
            <td>{{friend.firstName}}</td>
            <td>{{friend.lastName}}</td>
          </tr>
        </table>

What I want to do is to search a friend without looking at upcases and lowcases. So basically when I type "John", "JOHN" or simply "john" in my input, it should return my friend John.

So is it possible to apply a case insensitive option to a filter ?

Solution 1

Pass a function name to filter which you define on an applicable scope, where you use string's toLowerCase. See ngFilter. The function signature is a simple function (item) { ... }.

Example JS in your controller:

$scope.filterOnlyFoo = function (item) {
    return item == "foo";
}

Example HTML:

<div data-ng-repeat="item in items | filter: filterOnlyFoo"></div>

Sample Plunker

Solution 2

There is a way to turn on case insensetive filter:

<div data-ng-repeat="item in items | filter : searchText : false"></div>

Plunker

Comments

[user2462805]

But i don't want to lowcase or upcase anything. Just want to know if case insensitive is possible.

[Steve Klösters]

You don't have to set the original value to lowercase, only a temporary value (in an expression for example) to do the checking. For example item.toLowerCase() == "foo" is true for "FOO", but does not alter item.

[user2462805]

And what I've to do with ng-model on my input then ?

[Steve Klösters]

Instead of "foo" in my example you could do something with $scope.searchText.

[user2462805]

I'm sorry I'm a bit lost (and new to Angular ! ^^) Can you edit your answer with what I wrote in my question please ? Would be awesome

[Steve Klösters]

I added a sample Plunker. Hope it helps!

[user2462805]

Your solution is great but not strictly case insensitive because if the user type an Uppercase in his search it won't show anything.

[Steve Klösters]

You're right! It should be $scope.searchText.toLowerCase() in both predicates instead of $scope.searchText!

[user2462805]

Yeah that's right, it works perfectly as I wanted now. Thanks for your time again.

[Disp Hay]

I think this is should be the correct one since in docs.angularjs.org/api/ng/filter/filter, it said that in {{ filter_expression | filter : expression : comparator}}, if the comparator = false, then false|undefined: A short hand for a function which will look for a substring match in case insensitive way.

[Sohail Faruqui]

@Alexander Vasilyev: this is not 100% correct, since it tries to match sub-string in case insensitive way, so for example in his case if user searches with alphabet 'n' it will return all the records since all of them has 'n' in it, last attribute is for strict math, if true it will be exact match if false it will be case insensitive substring match