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.


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

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

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>

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>
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.