wake-up-neo.com

Angularjs if-then-else-Konstruktion im Ausdruck

Kann ich die if-then-else-Konstruktion (ternary-operator) irgendwie im anglejs-Ausdruck verwenden, zum Beispiel habe ich die Funktion $ scope.isExists (item), die den 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, eine If-Then-else-Konstruktion in einen Ausdruck zu integrieren. Vielen Dank.

javascriptangularjsif-statementangularjs-ng-repeatternary-operator
107
IgorCh

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)

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

PDATE: Angular= 1.1.5 Unterstützung für ternäre Operatoren hinzugefügt:

{{myVar === "two" ? "it's true" : "it's false"}}
216
Andre Goncalves

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

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

{{true?true:false}}
38
Sebastian

Sie können leicht ng-show verwenden, wie zum Beispiel:

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

Dies kann in einer Zeile erfolgen.

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

Verwendung in einem td -Tag:

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