Angularjs Wenn-Dann-Sonst-Konstruktion im Ausdruck

109

Kann ich irgendwie die if-then-else-Konstruktion (ternärer Operator) in anglejs Ausdruck verwenden, zum Beispiel habe ich die Funktion $ scope.isExists (item), die einen bool-Wert zurückgeben muss. Ich möchte so etwas,

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

Ich weiß, dass ich eine Funktion verwenden kann, die einen String zurückgibt. Ich bin an der Möglichkeit interessiert, die if-then-else-Konstruktion als Ausdruck zu verwenden. Vielen Dank.

IgorCh
quelle
3
Check outng-switch
NilsH
3
Seit 1.2 wird dies nun unterstützt.
Nilskp

Antworten:

219

Winkelausdrücke unterstützen den ternären Operator vor 1.1.5 nicht, können jedoch folgendermaßen emuliert werden:

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

Im Beispiel würde so etwas funktionieren:

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

UPDATE: Angular 1.1.5 hat Unterstützung für ternäre Operatoren hinzugefügt:

{{myVar === "two" ? "it's true" : "it's false"}}
Andre Goncalves
quelle
Muss && entkommen?
0xcaff
@caffinatedmonkey nein du darfst nicht. Sie können (wenn möglich für Ihr Projekt) den ternären Operator verwenden, wie ich in meiner Antwort auf die Themenfrage erklärt habe.
Sebastian
@Sebastian Was ist mit <und >als Vergleichsoperatoren?
0xcaff
@caffinatedmonkey Auch kein Problem, {{1> 0? true: false}} oder {{1> 0}} was auch immer Sie möchten. {{1> 0}} funktioniert auch in 1.0.8, der ternäre Operator jedoch nicht.
Sebastian
Dies ist immer noch eine gute Antwort, da es innerhalb der Einstellungen von Winkel-UI-Komponenten funktioniert (während der ternäre Operator dort aus irgendeinem Grund nicht funktioniert). Vielleicht hilft dies jemandem, der Schwierigkeiten hat, Winkel-
UI
39

Sie können den ternären Operator seit Version 1.1.5 und höher verwenden, wie in diesem kleinen Plunker gezeigt (Beispiel in 1.1.5):

Aus Gründen der Geschichte (vielleicht wird plnkr.co aus irgendeinem Grund in der Zukunft nicht mehr funktionieren) ist hier der Hauptcode meines Beispiels:

{{true?true:false}}
Sebastian
quelle
Aus geschichtlichen Gründen (vielleicht wird plnkr.co aus irgendeinem Grund in der Zukunft runterkommen) ist hier der Hauptcode meines Beispiels:{{true?true:false}}
Sebastian
1
Genau das, wonach ich gesucht habe, danke, habe fast einen Filter verwendet, um dies zu tun.
Unveränderlicher Ziegel
1
@IgorCh: Vielleicht möchten Sie die akzeptierte Antwort aktualisieren :)
Răzvan Flavius ​​Panda
25

Sie können ng-show einfach verwenden wie:

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

Für komplexere Tests können Sie ng-switch-Anweisungen verwenden:

    <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
quelle
Ein Vorteil, wenn Sie dies auf Elementebene wie diese anstatt innerhalb des Ausdrucks tun, besteht darin, dass Sie den Stil und den Inhalt der verschiedenen Optionen viel mehr anpassen können.
Supr
Ja, ich weiß, dass diese Funktionalität hilfreich sein könnte, aber ich möchte dem Dokument kein zusätzliches div hinzufügen. aber auch danke
IgorCh
0

Dies kann in einer Zeile erfolgen.

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

Verwendung in einem tdTag:

<td class="text-center">{{corretor.isAdministrador && 'Sim' || 'Não'}}</td>
Konsulat
quelle