如何在 ng-if 和变量中使用过滤器?

问题描述

在这个例子中，我在 ng-repeat，但是如何在变量和 ng-if 中使用它，例如:

{{languages.length |过滤器:{可用:真实}}}

和

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

请参阅小提琴.

HTML

<div>总共有 {{languages.length}} 种语言.</div><div>???有 {{languages.length}} 种语言可用.</div><div ng-if="languages.length == 0">???抱歉，没有可用的语言.</div><ol><li ng-repeat="语言中的语言 | 过滤器:{available: true}">{{language.name}}</li></ol>

AngularJS

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

解决方案

你能试试这个吗?

<div>总共有 {{languages.length}} 种语言.</div><div>有 {{(languages|filter:{available:true}).length}} 种语言可用.</div><div ng-if="(languages|filter:{available:true}).length == 0">抱歉，没有可用的语言.</div><ol><li ng-repeat="语言中的语言 | 过滤器:{available: true}">{{language.name}}</li></ol>

In this example, I use filter in the ng-repeat, but how do I use it in a variable and ng-if, something like:

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

and

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

See 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}
];

解决方案

Can you try this?

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

这篇关于如何在 ng-if 和变量中使用过滤器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！