javascript - Angularjs过滤器不为空

Question

试图过滤掉具有不为空的特定属性的项目所以：

var details = [{name:'Bill', shortDescription: null}, {name:'Sally', shortDescription: 'A girl'}]

我只想显示一里；莎莉的。这是我尝试过但没有成功的方法

<ul>
<li ng-repeat="detail in details | filter:{shortDescription:'!'}">
<p>{{detail.shortDescription}}</p>
</li>
</ul>

知道如何在不创建自定义过滤器的情况下做到这一点吗？即便如此，自定义过滤器会是什么样子？

Answer 1

Angular >=1.3.16 到最新（编写/更新时为 1.5.5）使用''（空字符串）（或'!!'也有效）

<ul>
    <li ng-repeat="detail in details | filter:{shortDescription: ''}">
        <p>{{detail.shortDescription}}</p>
    </li>
</ul>

示例：http: //jsfiddle.net/TheSharpieOne/1mnachk6/

---

角度 >=1.3.6 和 <=1.3.15 使用'!null'

<ul>
    <li ng-repeat="detail in details | filter:{shortDescription: '!null'}">
        <p>{{detail.shortDescription}}</p>
    </li>
</ul>

示例：http: //jsfiddle.net/TheSharpieOne/4wxs67yv/

---

Angular >=1.2 和 <=1.3.5 使用''（空字符串）（或者'!!'也可以）

<ul>
    <li ng-repeat="detail in details | filter:{shortDescription: ''}">
        <p>{{detail.shortDescription}}</p>
    </li>
</ul>

示例：http: //jsfiddle.net/TheSharpieOne/ovsqf17n/

---

角度 <1.2'!!'

<ul>
    <li ng-repeat="detail in details | filter:{shortDescription: '!!'}">
        <p>{{detail.shortDescription}}</p>
    </li>
</ul>

示例：http: //jsfiddle.net/TheSharpieOne/RGEdc/

---

总的来说，'!!'有最好的支持，但是''（空字符串）是推荐的并且是为此而设计的。

Answer 2

根据https://github.com/angular/angular.js/issues/11573 for Angular >= 1.4，建议使用 '' 匹配除 null/undefined 之外的任何原语。

<ul>
    <li ng-repeat="detail in details | filter:{shortDescription: ''}">
        <p>{{detail.shortDescription}}</p>
    </li>
</ul>

Answer 3

我认为这更容易阅读

 <ul>
    <li ng-repeat="detail in details" ng-if="detail.shortDescription">
        <p>{{detail.shortDescription}}</p>
    </li>
 </ul>

Answer 4

值得注意的是，要使用空引号解决方案，您需要将比较器保留为默认值false。您可能习惯于在控制器过滤器中输入 true ，如下所示：

const myAssessments = 
       this.filterFilter(this.assessments, {userId: this.user.id}, true);

如果没有 final ，这种类型的严格过滤器将无法工作true。但是您需要删除 true 或将其设为 false 才能使非空检查起作用：

const activeAndHistoric = 
      this.filterFilter(filteredAssessments, {historicYear: ''}, false);