716

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ます。この状態で何をすべきかわかりません：

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

10 に答える 10

1313

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. 考慮すべきもう 1 つのオプションは、ng-classディレクティブです。

これは次のように使用できます。

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

上記は基本的に、真実でlarge-videoあれば div 要素に css クラスを追加しvideo.largeます。

更新: Angular 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>
于 2013-04-04T11:58:29.237 に答える
29

video.yt$aspectRatioプロパティをフィルターに通し、結果をテンプレートの高さ属性にバインドすることで、プロパティを直接使用できます。

フィルターは次のようになります。

app.filter('videoHeight', function () {
  return function (input) {
    if (input === 'widescreen') {
      return '270px';
    } else {
      return '360px';
    }
  };
});

テンプレートは次のようになります。

<video height={{video.yt$aspectRatio | videoHeight}}></video>
于 2013-04-04T16:45:03.983 に答える
12

この場合、オブジェクトのプロパティに応じてピクセル値を「計算」します。

コントローラーでピクセル値を計算する関数を定義します。

コントローラーで:


$scope.GetHeight = function(aspect) {
   if(bla bla bla) return 270;
   return 360;
}

次に、テンプレートに次のように記述します。


element height="{{ GetHeight(aspect) }}px "
于 2013-10-29T11:35:11.043 に答える
4 
    <div ng-if="modeldate==''"><span ng-message="required" class="change">Date is required</span> </div>

上記のように ng-if ディレクティブを使用できます。

于 2016-12-08T12:36:51.173 に答える