2015-07-16 8 views
17

In questo esempio, io uso filtro nel ng-repeat, ma che modo si usa in una variabile e ng-if, qualcosa come:Come usare il filtro in ng-if e variabile?

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

e

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

Vedi 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} 
]; 
+0

non so perché vuoi farlo, semplicemente puoi fare

  1. {{language.name}}
ngLover

+0

Voglio semplicemente mostrare quante lingue sono disponibili, così come visualizzo il numero di lingue totali. Potrei fare una funzione per farlo e fare il filtraggio in JavaScript ma mi aspetto che ci sia un modo per farlo in sintassi Angolare nel codice HTML. –

+2

A volte una funzione breve in $ scope è più leggibile del codice spagetti in html. – Styx

risposta

35

Potete provare questo?

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

solo per aggiornare risposta precedente, non c'è bisogno di filtrare tre volte, creare nuova variabile 'filtrato' il primo filtro:

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

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

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

Questo funziona per me

Problemi correlati