ng-repeat过滤器空值不显示

Question

当我申请时，为什么赢得了无效的角度显示值：

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

其中filter2是

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

这里是我所说的http://plnkr.co/edit/cj3v1fuBu6sHVI7A4qlq?p=preview

当过滤器除了null之外的其他任何东西时，过滤器都可以工作，但是我试图只显示空的过滤器。我可以尝试将所有空值更改为除null之外的默认值字符串？是否有任何地方可以让过滤器使用空值？

Answer 1

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

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

<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>

double not运算符将任何值转换为boolean：第一个not运算符!将truthy值转换为boolean false，第二个将boolean反转为true。在我的测试中，过滤器实际上只是使用state:''，但我会使用!!只是为了安全起见...

Answer 2

我认为唯一不对的是你需要返回整个对象。

根据Brad在下面的评论，我去检查了文档，他是对的。我的代码示例工作的唯一原因是因为它返回了一个真正的代码。值。

我已经修改了下面的代码示例，以便将其考虑在内。

这是过滤器：

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

以下是文档中的相关部分：

  

function（actual，expected）：该函数将被赋予对象值和要比较的谓词值，如果该项应包含在过滤结果中，则应返回true。

plunkr

Answer 3

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

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

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

Answer 4

你也可以这样做

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

Answer 5

您可以在表达式中测试Null，如下所示：

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