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.


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

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

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>

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>
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.