如何在 ng-if 和变量中使用过滤器？答案

【问题标题】：How to use filter in ng-if and variable?如何在 ng-if 和变量中使用过滤器？
【发布时间】：2015-10-05 23:30:00
【问题描述】：

在本例中，我在ng-repeat 中使用了过滤器，但是如何在变量和ng-if 中使用它，类似于：

{{languages.length | filter: {available: true}}}

和

ng-if="languages.length == 0 | filter: {available: true}"

见Fiddle。

HTML

<div ng-controller="mainController">
    <div>There are {{languages.length}} languages in total.</div>
    <div>??? There are {{languages.length}} languages available.</div>
    <div ng-if="languages.length == 0">??? Sorry, there are no languages available.</div>

    <ol>
        <li ng-repeat="language in languages | filter: {available: true}">{{language.name}}</li>
    </ol>
</div>

AngularJS

$scope.languages = [
    {id:1, name:"German", available: false},    
    {id:2, name:"English", available: true},    
    {id:3, name:"French", available: false},  
    {id:4, name:"Italian", available: true},  
    {id:5, name:"Spanish", available: false}
];

【问题讨论】：

我不知道你为什么要这样做，你可以这样做
1. {{language.name}}
我只想显示有多少种语言可用，就像我显示总语言数一样。我可以创建一个函数来执行此操作并在 JavaScript 中进行过滤，但我希望有一种方法可以在 HTML 代码中的 Angular 语法中执行此操作。
有时 $scope 中的短函数比 html 中的意大利面条代码更具可读性。

标签： javascript angularjs angularjs-filter angular-ng-if

【解决方案1】：

你可以试试这个吗？

<div ng-controller="mainController">
    <div>There are {{languages.length}} languages in total.</div>
    <div>There are {{(languages|filter:{available:true}).length}} languages available.</div>
    <div ng-if="(languages|filter:{available:true}).length == 0">Sorry, there are no languages available.</div>

    <ol>
        <li ng-repeat="language in languages | filter: {available: true}">{{language.name}}</li>
    </ol>
</div>

【讨论】：

【解决方案2】：

只是为了更新之前的答案，不需要过滤三次，在第一个过滤器上创建新变量'filtered'：

<div ng-controller="mainController">
    <div>There are {{languages.length}} languages in total.</div>
    <div>There are {{(filtered = (languages|filter:{available:true})).length}} languages available.</div>
    <div ng-if="filtered.length == 0">Sorry, there are no languages available.</div>       
    <ol>
        <li ng-repeat="language in filtered">{{language.name}}</li>
    </ol>

    filtered=[{{filtered}}]
</div>

http://jsfiddle.net/to7z06ma/18/

【讨论】：

【解决方案3】：

<div ng-if="(answerText|lowercase)=='true'">T</div>

<div ng-if="(answerText|lowercase)=='false'">F</div>

这对我有用

【讨论】：