Konstrukcja Angularjs if-then-else w wyrażeniu

109

Czy mogę w jakiś sposób użyć konstrukcji if-then-else (operatora trójargumentowego) w wyrażeniu angularjs, na przykład mam funkcję $ scope.isExists (element), która musi zwrócić wartość bool. Chcę coś takiego

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

Wiem, że mogę użyć funkcji, która zwraca ciąg, interesuje mnie możliwość użycia konstrukcji if-then-else do wyrażenia. Dzięki.

IgorCh
źródło
3
Sprawdźng-switch
NilsH
3
Od wersji 1.2 jest to teraz obsługiwane.
nilskp

Odpowiedzi:

219

Wyrażenia kątowe nie obsługują operatora trójskładnikowego przed wersją 1.1.5, ale można go emulować w następujący sposób:

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

Na przykład zadziałałoby coś takiego:

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

AKTUALIZACJA: Angular 1.1.5 dodał obsługę operatorów trójskładnikowych:

{{myVar === "two" ? "it's true" : "it's false"}}
Andre Goncalves
źródło
Czy trzeba uciekać przed &&?
0xcaff
@caffinatedmonkey nie, nie wolno. Możesz (jeśli to możliwe w swoim projekcie) użyć operatora trójskładnikowego, jak wyjaśniłem w mojej odpowiedzi na pytanie w temacie.
Sebastian,
@Sebastian co <i >jak operatory porównania?
0xcaff
@caffinatedmonkey też nie ma problemu, {{1> 0? true: false}} lub {{1> 0}} cokolwiek chcesz. {{1> 0}} działa również w 1.0.8, ale operator trójskładnikowy nie.
Sebastian
Jest to nadal świetna odpowiedź, ponieważ działa w ustawieniach komponentów angular-ui (podczas gdy operator trójskładnikowy nie działa tam z jakiegoś powodu). Może to pomoże komuś, kto zmaga się z ustawieniem parametrów
angular
39

Możesz używać operatora trójargumentowego od wersji 1.1.5 i nowszych, jak pokazano w tym małym plunkrze (przykład w 1.1.5):

Ze względów historycznych (może plnkr.co z jakiegoś powodu zejdzie w przyszłości), oto główny kod mojego przykładu:

{{true?true:false}}
Sebastian
źródło
Ze względów historycznych (może plnkr.co z jakiegoś powodu zejdzie w przyszłości) tutaj jest główny kod mojego przykładu:{{true?true:false}}
Sebastian
1
Dokładnie to, czego szukałem, dziękuję, prawie użyłem do tego filtra.
Immutable Brick
1
@IgorCh: Możesz zaktualizować zaakceptowaną odpowiedź :)
Răzvan Flavius ​​Panda
25

Możesz łatwo użyć ng-show, takich jak:

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

W przypadku bardziej złożonych testów możesz użyć instrukcji 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>
Mickael
źródło
Zaletą robienia tego na poziomie elementu, a nie wewnątrz wyrażenia, jest to, że możesz znacznie bardziej dostosować styl i zawartość różnych opcji.
Niedziela
Tak, wiem, że ta funkcja może pomóc, ale nie chcę dodawać dodatkowego elementu div do dokumentu. ale także dzięki
IgorCh
0

Można to zrobić w jednej linii.

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

Użycie w tdtagu:

<td class="text-center">{{corretor.isAdministrador && 'Sim' || 'Não'}}</td>
Konsul
źródło