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

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

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

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

更新：Angular 1.1.5はngIf directive

5. ng-ifディレクティブ：

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

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>

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

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

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>

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>

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

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

コントローラで：

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

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

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

三項は非常にクリーンであることに同意します。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>

    <div ng-if="modeldate==''"><span ng-message="required" class="change">Date is required</span> </div>

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

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';
      }
  }

よろしくお願いします、

ヤン

ng if elseステートメント

ng-if="receiptData.cart == undefined ? close(): '' ;"