Angularjs过滤器不为空

Sco*_*ger 69 javascript angularjs angularjs-filter

尝试过滤掉具有非空属性的项目因此:

var details = [{name:'Bill', shortDescription: null}, {name:'Sally', shortDescription: 'A girl'}]
Run Code Online (Sandbox Code Playgroud)

我想只展示一个李; 莎莉的那一个.这是我试过没有成功的

<ul>
<li ng-repeat="detail in details | filter:{shortDescription:'!'}">
<p>{{detail.shortDescription}}</p>
</li>
</ul>
Run Code Online (Sandbox Code Playgroud)

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

The*_*One 123

Angular> = 1.3.16 to latest(写入/更新时为1.5.5)使用''(空字符串)(或'!!'也可以)

<ul>
    <li ng-repeat="detail in details | filter:{shortDescription: ''}">
        <p>{{detail.shortDescription}}</p>
    </li>
</ul>
Run Code Online (Sandbox Code Playgroud)

示例: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>
Run Code Online (Sandbox Code Playgroud)

示例: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>
Run Code Online (Sandbox Code Playgroud)

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


角度<1.2 '!!'

<ul>
    <li ng-repeat="detail in details | filter:{shortDescription: '!!'}">
        <p>{{detail.shortDescription}}</p>
    </li>
</ul>
Run Code Online (Sandbox Code Playgroud)

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


总的来说,'!!'有最好的支持,但''(空字符串)建议用于此目的.

  • 非常感谢.搜索网络超过一个小时,找不到 (3认同)
  • 没问题.它还过滤掉`undefined`. (2认同)

ska*_*alb 38

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

<ul>
    <li ng-repeat="detail in details | filter:{shortDescription: ''}">
        <p>{{detail.shortDescription}}</p>
    </li>
</ul>
Run Code Online (Sandbox Code Playgroud)

  • 工作,谢谢.但在这种情况下,angularjs语法是荒谬的(filter--). (5认同)

Jen*_*ius 6

我认为这更容易阅读

 <ul>
    <li ng-repeat="detail in details" ng-if="detail.shortDescription">
        <p>{{detail.shortDescription}}</p>
    </li>
 </ul>
Run Code Online (Sandbox Code Playgroud)