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.

Slava Utesinov · Accepted Answer · 2019-04-25 06:29:53Z

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>

answered Apr 25, 2019 at 6:29

Slava Utesinov

13.5k2 gold badges22 silver badges26 bronze badges

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

Comments

georgeawg · Accepted Answer · 2019-04-25 06:00:23Z

1

Add an ng-change directive:

<label>Phone only 
   <input ng-model="search.phone"
          ng-change="searchChange()">
</label><br>

And have it delete the property when the model is empty:

$scope.searchChange = function() {
    if (!$scope.search.phone) delete $scope.search.phone; 
}

The DEMO on PLNKR

answered Apr 25, 2019 at 6:00

georgeawg

49k13 gold badges78 silver badges98 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related