Angularjs filter allow null value using custom comparator not working?

Question

[Revised] I find out a solution to deal with that, just use AngularJs with ver. >= 1.3.6, items with null property will not be dropped after applying a filter and cancel it!!

following is original question

Hi, all. im using AngularJs to display data in a table with ng-repeat directive, and a textbox to filter "Color" property of cats. notice that some cat has null Color property.

Once i type some text in the textbox and clear it, all cat with color property is null are gone.

I set a custom comparator returning true on expected === '', but it doesn't work. actually, all cat with color property === null will never shown once the searching textbox has been placed some text into and been cleared afterward even i let the comparator always return true.

Is there any way to allow null values when using a filter in ng-repeat? thank you inadvance!!

JS Fiddle Demo: http://jsfiddle.net/gLL7wvcL/2/

my data(array of cats)

$scope.cats = [
{'Name': 'John',
 'Sex': 'Male',
 'Color': 'Black'},
{'Name': 'Rose',
 'Sex': 'Female',
 'Color': 'White'},
  {'Name': 'Cindy',
 'Sex': 'Female',
 'Color': 'Yellow'},
  {'Name': 'David',
 'Sex': 'Male',
 'Color': 'Black'},
  {'Name': 'Garen',
 'Sex': 'Male',
 'Color': null},
  {'Name': 'Jim',
 'Sex': 'Male',
 'Color': null},
  {'Name': 'Charotte',
 'Sex': 'Female',
 'Color': 'Black'}
];

and both comparator following not working, once the searching textbox has been placed some text into and been cleared afterward, all cat with color property === null will never shown.

$scope.myComparator = function (actual, expected) 
  {
      if (expected === '') 
          return true;
      else
      {
          var text = ('' + actual).toLowerCase();
            return text.indexOf(expected) > -1;
      }
  };

$scope.myComparator = function (actual, expected) 
  {
      return true;
  };

dfsq · Accepted Answer · 2014-12-15 13:43:48Z

1

The problem here is that after you clear the input, filter model looks like this:

{"Color": ""}

so empty string will not match colors with color null. What you just need to do is to remove "Color" property if it's null, maybe on change. In this case you will not need myComparator at all:

$scope.clear = function() {
    if ($scope.search.Color === null) {
        delete $scope.search.Color;
    }
};

and you would use just

ng-repeat="cat in cats | filter:search"

Demo: http://plnkr.co/edit/MrvBa09y9SrE3TlTUxP6?p=preview

answered Dec 15, 2014 at 13:43

dfsq

193k26 gold badges244 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Touchout Over a year ago

thanks! it works! But i think this way is kind of a workaround? If i want filter more than one property, i have to write more delete statement in clear() function, right? I really curious about why the comparator always returning true still blocks items with null property

dfsq Over a year ago

"I really curious about why the comparator always returning true still blocks items with null property" comparator is not even called for null values, because it's executed after filter function (previous step). And filter expression excludes Color: null objects.

dfsq Over a year ago

"If i want filter more than one property, i have to write more delete statement in clear() function, right?" you can write generic function, like in this demo plnkr.co/edit/PEGJMdenU9CtfOd1vaID?p=preview

DoctorMick · Accepted Answer · 2014-12-15 13:53:04Z

0

A different approach is to use a filter function, compare against the entire object rather than the property and attach the criteria to the controller scope.

Markup:

<tr ng-repeat="cat in cats | filter:myComparator">

Controller:

$scope.myComparator = function (actual) 
{
    var expected = $scope.filter;
    if (expected === '') 
    {
        return true;
    }
    else
    {
        var text = ('' + actual.Color).toLowerCase();
        return text.indexOf(expected) > -1;
    }
};

Full example in an updated fiddle: http://jsfiddle.net/gLL7wvcL/3/

answered Dec 15, 2014 at 13:53

DoctorMick

6,80330 silver badges27 bronze badges

1 Comment

Touchout Over a year ago

Thank you, it works! but with this solution, i must hard-code var expected = $scope.filter; to get my expected value.

mersadk · Accepted Answer · 2014-12-15 13:39:02Z

-1

if (expected === '') will check for empty string, not null.

Try replacing it with

if (!expected) .....

answered Dec 15, 2014 at 13:39

mersadk

3375 silver badges21 bronze badges

2 Comments

DoctorMick Over a year ago

The expected is the input string to search against which will indeed be '' when there is no search value.

Touchout Over a year ago

thanks for answer!! but i think the "expected" means what's inside my searching textbox, not the actual value of my data being filtered. i tried your solution, and it's sadly not working, too.

Collectives™ on Stack Overflow

Angularjs filter allow null value using custom comparator not working?

[Revised] I find out a solution to deal with that, just use AngularJs with ver. >= 1.3.6, items with null property will not be dropped after applying a filter and cancel it!!

following is original question

3 Answers 3

Demo: http://plnkr.co/edit/MrvBa09y9SrE3TlTUxP6?p=preview

3 Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

[Revised] I find out a solution to deal with that, just use AngularJs with ver. >= 1.3.6, items with null property will not be dropped after applying a filter and cancel it!!

following is original question

3 Answers 3

Demo: http://plnkr.co/edit/MrvBa09y9SrE3TlTUxP6?p=preview

3 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related