web-dev-qa-db-fra.com

Comment utiliser le filtre dans ng-if et variable?

Dans cet exemple, j'utilise un filtre dans le ng-repeat , mais comment l'utiliser dans une variable et ng-if, quelque chose comme:

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

et

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

Voir Violon .

[~ # ~] 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}
];
javascriptangularjsangularjs-filterangular-ng-if
26
Edward Tanguay

Peux-tu essayer ça?

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

Juste pour mettre à jour la réponse précédente, pas besoin de filtrer trois fois, créez une nouvelle variable 'filtrée' sur le premier filtre:

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

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

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

Ça marche pour moi

2
SSD