ng-repeat 过滤器空值不显示答案

【问题标题】：ng-repeat filter null value not displayingng-repeat 过滤器空值不显示
【发布时间】：2014-11-10 20:04:54
【问题描述】：

为什么我应用时角度显示不为空的值：

ng-repeat="p in foo | filter: filter2"

filter2 在哪里

 $scope.filter2 = function(p){
    if (p.state === null){
        return p.state;
    } else{
        return;
    }
};

过滤器在它不是空值时起作用，但我试图只显示空值。我可以尝试将所有空值更改为空值以外的默认值字符串？有什么地方可以让过滤器处理空值吗？

【问题讨论】：

【解决方案1】：

您可以在不编写自定义过滤器的情况下过滤空项目。

使用 plunk 中的代码，这将返回 null 项：

<ul ng-repeat="p in foo | filter:{state:'!'}" >
  <li>{{p.name}}</li>
</ul>

相反，这将返回所有非空项：

<ul ng-repeat="p in foo | filter:{state:'!!'}" >
  <li>{{p.name}}</li>
</ul>

双非运算符将任何值转换为布尔值：第一个非运算符! 将真值转换为布尔值false，第二个非运算符将布尔值反转回true。在我的测试中，过滤器实际上只使用state:'' 就可以工作，但为了安全起见，我会使用!!...

【讨论】：

【解决方案2】：

我认为唯一的错误是您需要返回整个对象。

根据下面布拉德的评论，我去检查了文档，他是对的。我的代码示例有效的唯一原因是它返回了一个“真实”值。

我已经修改了下面的代码示例以考虑到这一点。

这是过滤器：

$scope.filter2 = function(p){
    if (p.state === null){
        return true;
    } else{
        return;
    }
};

这是文档中的相关部分：

function(actual, expected): 函数将被赋予对象值和谓词值进行比较，如果该项目应包含在过滤结果中，则应返回 true。

【讨论】：

【解决方案3】：

| filter:{expression} 期待 true 或 false 评估，而不是对象。因此：

$scope.filter1 = function(p){
    return (p.state === 'on');
};

 $scope.filter2 = function(p){
    return (p.state === null);
};

【讨论】：

【解决方案4】：

你也可以这样做

<ul ng-repeat="p in foo" >
  <li ng-if = "p.states">{{p.name}}</li>
</ul>

【讨论】：

【解决方案5】：

您可以像这样在表达式中测试 Null：

ng-repeat="p in foo | filter:{state:null}"

【讨论】：