Question

我在输入过滤器时发现问题，然后将其删除，集合不断被过滤，并且未显示 undefined 或的项目过滤后的术语中的null 值。

示例代码：

<div ng-app="App" ng-controller="AppController as app">
<p>
Filters
</p>
    Name: <input ng-model="listFilters.name" type="text"/>
    <br/>
    Short Description: <input ng-model="listFilters.shortDescription" type="text"/>

    <ul>
        <li ng-repeat="person in app.persons | filter:{name: listFilters.name, shortDescription: listFilters.shortDescription}">
            <p>{{person.name}}</p>
        </li>
    </ul>
</div>

角度代码：

angular.module('App', []);
angular.module('App').controller('AppController', AppController);
function AppController() {
        var ctrl = this;

    ctrl.persons = [
        {
            name: 'Bill',
            shortDescription: null
        }, 
        {
            name: 'Sally',
            shortDescription: 'A girl'
        },
        {
            name: 'Jhon',
        },
    ];
}

工作小提琴：https://jsfiddle.net/89pkcww2/

看到我正在谈论的问题的步骤：

按名称过滤，列表已过滤。
删除过滤器，查看列表的再次显示方式（Bill，Sally，Jhon）。
按说明过滤，列表已过滤。
删除过滤器，只显示集合的第二个值（Sally），未定义或空值的那些值不是。它通过＆＃34;空字符串＆＃34;。

我猜这是Angular过滤器中的默认行为，但是......有没有办法改变它？我必须制作自己的过滤器吗？

我想分别按两个属性进行过滤，collection | filter: filter.var 不用于此目的。

这也不是过滤只显示非空值，它更接近相反...

Answer 1

将您的li html更新为以下内容：

<li ng-repeat="person in app.persons | filter:listFilters.name">

这是更新的小提琴：https://jsfiddle.net/89pkcww2/1/

Answer 2

shortDescription：null，它不代表''，null！=''，所以当您从'简短描述'中删除文本时，它不显示'Bill'项。
1. 在第三项上根本没有 shortDescription ，因此ng-model="listFilters.shortDescription"无法绑定到该属性。
2. 只有'Sally'项才能正常工作，因为ng-model可以绑定到属性。

如何使角度空过滤器匹配未定义和空值？

2 个答案: