式でのAngularjs if-then-else構築


109

どういうわけか、angularjs式でif-then-else構成(3項演算子)を使用できますか?たとえば、ブール値を返す必要がある関数$ scope.isExists(item)があります。このようなものが欲しい

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

文字列を返す関数を使用できることはわかっていますが、if-then-else構文を式に使用できる可能性に興味があります。ありがとう。


3
チェックアウトng-switch
NilsH 2013年

3
1.2以降、これがサポートされるようになりました。
nilskp 2014年

回答:


219

角度式は1.1.5より前の三項演算子をサポートしていませんが、次のようにエミュレートできます。

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

したがって、例では、次のようなものが機能します。

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

更新: Angular 1.1.5は三項演算子のサポートを追加しました:

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

&&はエスケープする必要がありますか?
0xcaff 2014年

@caffinatedmonkeyいやしてはいけません。トピックの質問に対する私の回答で説明したように、(可能であればプロジェクトで)三項演算子を使用できます。
セバスチャン

何について@Sebastian <>比較演算子のように?
0xcaff 2014

@caffinatedmonkeyまた、{{1> 0?true:false}}または{{1> 0}}のいずれでも問題ありません。{{1> 0}}は1.0.8でも機能しますが、3項演算子は機能しません。
セバスチャン

これは、angular-uiコンポーネントの設定内で機能するため、依然として素晴らしい答えです(一方、3項演算子は何らかの理由でそこで機能しません)。多分これはangular-uiパラメータを設定するのに苦労している誰かを助けるかもしれません
Olga Gnatenko 2014

39

この小さなプランカー(1.1.5の例)で示されているように、バージョン1.1.5以上から三項演算子を使用できます。

歴史上の理由から(多分plnkr.coは将来何らかの理由でダウンします)、ここに私の例のメインコードを示します。

{{true?true:false}}

歴史上の理由(多分plnkr.co将来的に何らかの理由で降りて)ここに私の例の主なコードである:{{true?true:false}}
セバスチャン

1
まさに私が探していたものに感謝し、これを行うためにほとんどフィルターを使用しました。
イミュータブルブリック2014

1
@IgorCh:あなたは受け入れ答え:)更新することをお勧めします
はRazvanフラウィウスパンダ

25

次のようなng-showを簡単に使用できます。

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

より複雑なテストでは、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>

式の内部ではなく、このような要素レベルでそれを行う利点は、さまざまなオプションのスタイルと内容をさらにカスタマイズできることです。
2013年

はい、この機能が役立つことを知っていますが、ドキュメントにdivを追加したくありません。また、感謝
IgorCh 2013年

0

これは1行で行うことができます。

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

tdタグでの使用:

<td class="text-center">{{corretor.isAdministrador && 'Sim' || 'Não'}}</td>
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.