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

Question

如何过滤 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);

Answer 1

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

在您的控制器中创建一个过滤器功能，仅 return 那些 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}">

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

How to filter ng-repeat list on empty string values with an inputfield?

angularjs

angularjs-ng-repeat

angularjs-filter