angularjs 如何过滤ng-repeat列表的空字符串值与inputfield?

jgwigjjp  于 2023-08-02  发布在  Angular
关注(0)|答案(1)|浏览(137)

如何筛选ng-repeat以显示某个columnfield为空字符串的所有项?当我尝试在字段中不输入任何内容时,它似乎总是给予出完整的列表(这是预期的)。我只想见id为1的人。如何调整inputfield中的某个字符对name列的空字段进行ng repeat过滤。
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);

5ktev3wc

5ktev3wc1#

删除控制器中的$scope.filter()函数和视图中的ng-change="filter()"函数。您应该将var people数组更改为$scope.people。您还需要删除行$scope.people = people.slice(0);
在控制器中创建一个filter函数,如果$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}">

相关问题