ng-repeat 过滤 null 值不显示

Question

为什么我的Angular应用在某些值为null时无法显示？

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

filter2是什么

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

这里有一个带有我所说内容的plnkr: http://plnkr.co/edit/cj3v1fuBu6sHVI7A4qlq?p=preview 当过滤器不是null时，它可以工作，但我想只显示null。我可以尝试将所有的null值更改为默认值字符串而不是null吗？有没有地方可以使过滤器与null一起使用？

- Garuuk

---

不同的解决方案：https://dev59.com/MF8f5IYBdhLWcg3wJPxl#24992197 - andrew.fox

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

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

- Niko Nyman

Answer 2

我认为唯一的问题在于你需要返回整个对象。

根据Brad下面的评论，我去查看了文档，他是对的。我的代码示例之所以有效只是因为它返回了一个“真值”。

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

这是筛选器：

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

以下是文档中相关部分的翻译:

函数(function)：接收一个参数actual和一个参数expected。该函数将对这两个参数进行比较，如果该项应该包含在筛选结果中，则返回true。

plunkr

- Caspar Harmer

---

哈哈，我明白你做了什么。你返回了 p 而不是 p.state。如果它能工作就行了... 在 JavaScript 中，你不能返回一个空值吗？我以为你可以的。 - Garuuk

你可以这样做，但是 ng-repeat 可能不喜欢。 - Caspar Harmer

Answer 3

| filter:{expression} 期望得到一个true或false的评估结果，而不是一个对象。因此：

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

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

- Brad Wells

Answer 4

你也可以这样做。

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

- Dharmendra Kumar

Answer 5

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

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

- matharden