Angularjs if-then-else costruzione nell'espressione


109

Posso in qualche modo usare la costruzione if-then-else (operatore ternario) nell'espressione angularjs, ad esempio ho la funzione $ scope.isExists (elemento) che deve restituire il valore bool. Voglio qualcosa di simile

<div ng-repeater="item in items">
    <div>{{item.description}}</div>
    <div>{{isExists(item) ? 'available' : 'oh no, you don't have it'}}</div>
</div>

So che posso usare la funzione che restituisce una stringa, sono interessante nella possibilità di utilizzare la costruzione if-then-else nell'espressione. Grazie.


3
Check outng-switch
NilsH

3
Dalla 1.2 questo è ora supportato.
nilskp

Risposte:


219

Le espressioni angolari non supportano l'operatore ternario prima della 1.1.5, ma possono essere emulate in questo modo:

condition && (answer if true) || (answer if false)

Quindi, ad esempio, qualcosa del genere funzionerebbe:

<div ng-repeater="item in items">
    <div>{{item.description}}</div>
    <div>{{isExists(item) && 'available' || 'oh no, you don't have it'}}</div>
</div>

AGGIORNAMENTO: Angular 1.1.5 ha aggiunto il supporto per gli operatori ternari:

{{myVar === "two" ? "it's true" : "it's false"}}

È necessario eseguire l'escape di &&?
0xcaff

@caffinatedmonkey no, non devi. Potresti (se possibile per il tuo progetto) utilizzare l'operatore ternario come ho spiegato nella mia risposta alla domanda sull'argomento.
Sebastian

@Sebastian Che dire <e >come operatori di confronto?
0xcaff

@caffinatedmonkey Nessun problema anche, {{1> 0? true: false}} o {{1> 0}} come preferisci. {{1> 0}} funziona anche nella 1.0.8, ma l'operatore ternario no.
Sebastian

Questa è ancora un'ottima risposta poiché funziona all'interno delle impostazioni dei componenti angular-ui (mentre l'operatore ternario non funziona lì per qualche motivo). Forse questo aiuta qualcuno che fatica a impostare i parametri angolari
dell'interfaccia utente

39

È possibile utilizzare l'operatore ternario dalla versione 1.1.5 e successive come dimostrato in questo piccolo plunker (esempio in 1.1.5):

Per motivi storici (forse plnkr.co scenderà per qualche motivo in futuro) ecco il codice principale del mio esempio:

{{true?true:false}}

Per motivi storici (forse plnkr.co scenderà per qualche motivo in futuro) ecco il codice principale del mio esempio:{{true?true:false}}
Sebastian

1
Esattamente quello che stavo cercando grazie, ho quasi usato un filtro per farlo.
Immutable Brick

1
@IgorCh: potresti voler aggiornare la risposta accettata :)
Răzvan Flavius ​​Panda

25

Puoi facilmente usare ng-show come:

    <div ng-repeater="item in items">
        <div>{{item.description}}</div>
        <div ng-show="isExists(item)">available</div>
        <div ng-show="!isExists(item)">oh no, you don't have it</div>
    </div>

Per test più complessi, puoi utilizzare le istruzioni ng-switch:

    <div ng-repeater="item in items">
        <div>{{item.description}}</div>
        <div ng-switch on="isExists(item)">
            <span ng-switch-when="true">Available</span>
            <span ng-switch-default>oh no, you don't have it</span>
        </div>
    </div>

Un vantaggio di farlo a livello di elemento come questo invece che all'interno dell'espressione è che puoi personalizzare molto di più lo stile e il contenuto delle diverse opzioni.
Supr

Sì, conosco questa funzionalità che potrebbe aiutare, ma non voglio aggiungere div extra al documento. ma anche grazie
IgorCh

0

Questo può essere fatto in una riga.

{{corretor.isAdministrador && 'YES' || 'NÂO'}}

Utilizzo in un tdtag:

<td class="text-center">{{corretor.isAdministrador && 'Sim' || 'Não'}}</td>
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.