[解決済み] AngularJS テンプレートにおける if else ステートメント

質問

AngularJSのテンプレートで条件分岐を行いたい。Youtube APIから動画一覧を取得する。いくつかのビデオは16:9の比率で、いくつかは4:3の比率です。

このような条件を作りたい。

if video.yt$aspectRatio equals widescreen then 
    element's attr height="270px"
else
    element's attr height="360px"

を使って動画を反復しています。 ng-repeat . この条件に対して何をすべきか見当もつきません。

• スコープに関数を追加する？
• テンプレートで行う？

解決方法は？

Angularjs (1.1.5以下のバージョン) では if/else 機能です。以下は、あなたが実現したいことに合わせて検討すべきいくつかのオプションです。

( バージョン1.1.5以上をお使いの方は、以下のアップデート(#5)にジャンプしてください。 )

1. 三項演算子。

コメントで @Kirk が提案したように、最もクリーンな方法は、以下のように三項演算子を使うことでしょう。

<span>{{isLarge ? 'video.large' : 'video.small'}}</span>

2. ng-switch ディレクティブを使用します。

は、以下のような使い方ができる。

<div ng-switch on="video">
    <div ng-switch-when="video.large">
        <!-- code to render a large video block-->
    </div>
    <div ng-switch-default>
        <!-- code to render the regular video block -->
    </div>
</div>

3. ng-hide / ng-show ディレクティブ

あるいは ng-show/ng-hide に合致する方を非表示にするのですが、これを使うと実際に大きな動画と小さな動画の両方の要素がレンダリングされ ng-hide を満たすものを表示し ng-show という条件があります。つまり、各ページで実際には2つの異なる要素をレンダリングすることになります。

4. もう一つの選択肢として ng-class ディレクティブを使用します。

これは、以下のように使用することができます。

<div ng-class="{large-video: video.large}">
    <!-- video block goes here -->
</div>

上記では基本的に large-video の場合、div 要素に css クラスを追加します。 video.large が真実になります。

UPDATE アンギュラー1.1.5 が導入されました。 ngIf directive

5. ng-if ディレクティブを使用します。

上記のバージョンでは 1.1.5 を使用することができます。 ng-if ディレクティブを使用します。これは、提供された式が以下を返した場合、その要素を削除します。 false を挿入し element を返した場合、DOM に true . 以下のように使用することができます。

<div ng-if="video == video.large">
    <!-- code to render a large video block-->
</div>
<div ng-if="video != video.large">
    <!-- code to render the regular video block -->
</div>