Пустые значения не отображаются снова после фильтрации по угловым данным

Question

Я фильтрую по столбцам в datatable в angularjs. Мой набор данных выглядит следующим образом:

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

Когда я фильтрую на основе Phone Number, скажем, «55», я получаю следующие 2 результата:

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

Но когда я очищаю текстовое поле, я не получаю все 4 обратно, а вместо этого получаю 3 с ненулевыми номерами телефонов:

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

Тот, с нулевым номером телефона, не отображается.

Весь код можно найти здесь: https://plnkr.co/edit/1r2nGqOhXQSCSIrILY3Z?p=preview

Дополнительная информация: я даже пытался заменить пустую строку в текстовом поле ввода на null с помощью функции JS в контроллере.

Answer 1

Это происходит из-за отсутствия свойства phone, попробуйте это решение :

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

Answer 2

Добавьте директиву ng-change:

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

И удалите свойство, когда модель пуста:

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

DEMO на PLNKR