web-dev-qa-db-ja.com

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を使ってビデオを繰り返しています。この状態に対してどうすればよいのかわかりません。

  • スコープに関数を追加しますか？
  • テンプレートで行いますか？
if-statementangularjs
672
vzhen

Angularjs（バージョン1.1.5以下）はif/else機能を提供しません。以下は、達成したいことを検討するためのいくつかのオプションです。

（バージョン1.1.5以降を使用している場合は、下の更新（＃5）にジャンプしてください）

1.三項演算子：

コメントで@Kirkが示唆しているように、これを行うための最も明確な方法は次のように3項演算子を使用することです。

<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要素にvideo.large cssクラスを追加します。

アップデート： Angular 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>
1244
Amyth

最新バージョンのAngular（1.1.5）では、ngIfという名前の条件付きディレクティブが含まれています。 ngShowやngHideとは、要素は隠されていないがDOMにはまったく含まれていないという点で異なります。それらは作成にコストがかかるが使用されていないコンポーネントに非常に便利です。

<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>
171
Brian Genisio

これを行う最も明確な方法は三項です。

<div>{{ConditionVar ? 'varIsTrue' : 'varIsFalse'}}</div>
133
Oliver Dixon

Angular自体はif/else機能を提供しませんが、このモジュールを含めることでそれを得ることができます：

https://github.com/zachsnow/ng-Elif

それ自身の言葉では、それは単なる「制御フロー指令の単純な集まり：ng-if、ng-else-if、およびng-else」です。使い方は簡単で直感的です。

例：

<div ng-if="someCondition">
    ...
</div>
<div ng-else-if="someOtherCondition">
    ...
</div>
<div ng-else>
    ...
</div>
41
lpappone

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

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

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

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

<video height={{video.yt$aspectRatio | videoHeight}}></video>
27
Noah Freitas

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

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

コントローラで：


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

それからあなたのテンプレートであなたが書くだけです：


element height="{{ GetHeight(aspect) }}px "
10
Spock

私は三項が非常にきれいであることに同意します。場合によってはdiv、p、またはtableを表示する必要がありますが、明らかな理由で3進数を好みません。関数を呼び出すのが通常理想的です、または私の場合私はこれをしました：

<div ng-controller="TopNavCtrl">
        <div ng-if="info.Host ==='servername'">
            <table class="table">
                <tr ng-repeat="(group, status) in user.groups">
                    <th style="width: 250px">{{ group }}</th>
                    <td><input type="checkbox" ng-model="user.groups[group]" /></td>
                </tr>
            </table>
        </div>
       <div ng-if="info.Host ==='otherservername'">
            <table class="table">
                <tr ng-repeat="(group, status) in user.groups">
                    <th style="width: 250px">{{ group }}</th>
                    <td><input type="checkbox" ng-model="user.groups[group]" /></td>
                </tr>
            </table>
        </div>
</div>
8
Tom Stickel
    <div ng-if="modeldate==''"><span ng-message="required" class="change">Date is required</span> </div>

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

3
JBhardwaj

Angularの可能性：html部分にif - ステートメントを含める必要がありました。作成したURLのすべての変数が定義されているかどうかをチェックする必要がありました。私は次のようにしましたが、それは柔軟なアプローチのようです。誰かに役立つことを願っています。

テンプレート内のHTML部分：

    <div  *ngFor="let p of poemsInGrid; let i = index" >
        <a [routerLink]="produceFassungsLink(p[0],p[3])" routerLinkActive="active">
    </div>

そしてTypeScriptの部分：

  produceFassungsLink(titel: string, iri: string) {
      if(titel !== undefined && iri !== undefined) {
         return titel.split('/')[0] + '---' + iri.split('raeber/')[1];
      } else {
         return 'Linkinformation has not arrived yet';
      }
  }

よろしくお願いします、

1月

2
Jan Clemens Stoffregen