[New Version] I've discovered a solution to address this issue - by utilizing AngularJs version 1.3.6 or higher, items with null properties will not vanish after applying a filter and then removing it!
original query below
Hello everyone, I am currently using AngularJs to exhibit data in a table using the ng-repeat directive, along with a textbox for filtering the "Color" property of cats. It's worth noting that some cats have a null Color property.
Whenever I enter text in the textbox and then clear it, all cats with a null Color property disappear.
I attempted setting a custom comparator that returns true when expected === '', but unfortunately, it did not work as expected. Essentially, cats with a Color property === null are never displayed once the search textbox has been filled with text and subsequently cleared, even if the comparator always returns true.
Is there any method to allow null values while using a filter in ng-repeat? Thank you in advance!!
JS Fiddle Demo: http://jsfiddle.net/gLL7wvcL/2/
my cat 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'}
];
Both comparators provided above are not effective; once the search textbox is filled with text and then cleared, all cats with a Color property equal to null are no longer visible.
$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;
};