如何使用输入字段过滤空字符串值的 ng-repeat 列表？

【问题标题】：How to filter ng-repeat list on empty string values with an inputfield?如何使用输入字段过滤空字符串值的 ng-repeat 列表？
【发布时间】：2017-07-20 13:02:36
【问题描述】：

如何过滤 ng-repeat 以显示某个列字段为空字符串的所有项目？当我通过在该字段中不输入任何内容来尝试此操作时，它似乎总是给出完整的列表（这是预期的）。我只想看到 id 为 1 的人。如何调整过滤器以使输入字段中的某个字符使 name 列的空字段上的 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);

【问题讨论】：

标签： angularjs angularjs-ng-repeat angularjs-filter

【解决方案1】：

删除控制器中的$scope.filter() 函数和视图中的ng-change="filter()"。您应该将var people 数组更改为$scope.people。您还需要删除行$scope.people = people.slice(0);。

在你的控制器中创建一个过滤函数，如果$scope.filterValue 为空，则只返回name 属性为空的人：

$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}">

【讨论】：