如何使用輸入字段過濾空字符串值的ng-repeat列表？

Question

如何過濾ng-repeat以顯示某個列字段爲空字符串的所有項目？當我通過在字段中輸入任何內容來嘗試這種方式時，它似乎總是給出完整列表（這是預期的）。我只想看到ID爲1的人。我如何調整過濾器，以使輸入字段中的某個字符對名稱列的空字段進行ng重複篩選。

FiddleJs Example

我的觀點：

<div class="panel-heading"> 
    <h3>Filtered by {{filterValue}}</h3> 
    <input ng-change="filter()" ng-model="filterValue"/> 
</div> 
<div class="panel-body"> 
    <ul class="list-unstyled"> 
    <li ng-repeat="p in filteredPeople"> 
     <h4>{{p.name}} ({{p.age}}) id: {{p.id}}</h4> 
    </li> 
    </ul> 
</div> 

控制器：

var people = [{ 
     name: '', 
     age: 32, 
     id: 1 
    }, { 
     name: 'Jonny', 
     age: 34, 
     id: 2 
    }, { 
     name: 'Blake', 
     age: 28, 
     id: 3 
    }, { 
     name: 'David', 
     age: 35, 
     id: 4 
    }]; 

    $scope.filter = function (value) { 
    $scope.filteredPeople = $filter('filter')(people, { 
     name: $scope.filterValue 
    }); 
    } 

    $scope.people = people.slice(0); 

Answer 1

刪除您$scope.filter()功能的控制器和視圖中的ng-change="filter()"。您應該將var people數組更改爲$scope.people。您還需要刪除行$scope.people = people.slice(0);。

在你的控制器創建一個過濾功能只返回人，他們的name屬性爲空，如果$scope.filterValue爲空：

$scope.emptyFilter = function(person) { 
    if ($scope.filterValue.length === 0) { 
     if (person.name.length === 0) { 
      return person; 
     } 
    } else { 
     return person; 
    } 
}; 

接下來，更新您的ng-repeat下列要求：

<li ng-repeat="p in people | filter:emptyFilter | filter:{name: filterValue}">