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.