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;
};
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"
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With