Kimberly BF Kimberly BF - 4 months ago 7
AngularJS Question

Angular filter not showing objects with null properties

I have an array of operators like this:

[
{
"id":1,
"key":"55330",
"name":"Macie",
"operative_status":{
"id":20,
"code":"100",
"name_status":"viaje",
"created_at":"2016-08-03T21:28:52Z"
}
},
{
"id":2,
"key":"8439",
"name":"Darian",
"operative_status":null
},
{
"id":3,
"key":"49531",
"name":"Kaelyn",
"operative_status":null
}
]


And I want to display them using an
ng-repeat
:

<div ng-repeat="operator in operators | filter:{ operative_status : {name_status: status}}">


As you can see, I want to filter by status.

The problem is that it doesn't show the operators that have the operative_status with null.

Answer

For your data, using a pattern object as the filter expression won't work because the items that have a value of null for the operative_status property will never be matched, which is what you're observing.

You could use a predicate function instead for the filter expression.

For example:

$scope.filterByStatus = function (value) { if ($scope.status.length === 0) return true; return value.operative_status && value.operative_status.name_status === $scope.status; };

And then using it in your filter expression:

operator in operators | filter:filterByStatus

Demonstration Plunker