☰

AngularJS テンプレートの if else ステートメント 質問する

tag-icon • tag-icon if-statement angularjs
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。この条件に対して何をすべきかわかりません:

  • スコープ内に関数を追加しますか?
  • テンプレートでやるんですか？

ベストアンサー1

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。

アップデート：角度1.1.5導入したngIf directive

5.ng-if指令：

上記のバージョンでは、ディレクティブ1.1.5を使用できますng-if。これにより、指定された式が を返す場合は要素が削除され、式が を返す場合は DOM に がfalse再挿入されます。 は次のように使用できます。elementtrue

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

おすすめ記事