Empty values do not show up again after filtering from angular datatable

Question

I am filtering by column on my datatable in angularjs. My datataset is as follows:

{name:'John', phone:'555-1276'},
{name:'Mary', phone:'800-BIG-MARY'},
{name:'Mike', phone:'555-4321'},
{name:'Johnny'}

When I filter based on Phone Number, lets say "55", I get the following 2 results:

{name:'John', phone:'555-1276'},
{name:'Mike', phone:'555-4321'}

But when I clear the text box, I do not get all the 4 back, but instead get the 3 with non-null phone numbers:

{name:'John', phone:'555-1276'},
{name:'Mary', phone:'800-BIG-MARY'},
{name:'Mike', phone:'555-4321'}

The one with the null phone number does not show up.

Whole code can be found here: https://plnkr.co/edit/1r2nGqOhXQSCSIrILY3Z?p=preview

Additional info: I even tried replacing the empty string in the input text box with null with a JS function in the controller.

Answer 1

It happens due to the absence of phone property, try this solution:

<tr ng-init='friendObj.phone = friendObj.phone || ""' ng-repeat="friendObj in friends | filter:search:strict">
    <td>{{friendObj.name}}</td>
    <td>{{friendObj.phone}}</td>
</tr>