web-dev-qa-db-ja.com

式におけるAngularjs if-then-else構成

例えば、bool値を返さなければならない関数$ 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構造を使用する可能性があるとおもしろいです。ありがとう。

javascriptangularjsif-statementangularjs-ng-repeatternary-operator
107
IgorCh

角度式は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>

PDATE： Angular 1.1.5に三項演算子のサポートが追加されました。

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

あなたはバージョン1.1.5以降の三項演算子を、このちょっとで示したように使うことができます plunker （1.1.5の例）：

歴史的な理由で（多分plnkr.coは将来何らかの理由で降りるでしょう）これが私の例のメインコードです：

{{true?true:false}}
38
Sebastian

次のような簡単に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>
25
Mickael

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

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

tdタグでの使用法

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