if-statement - angular1 - ngif else angular 6




如果else語句在AngularJS模板中 (6)

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條件的視頻。 因此,在每個頁面上,您將實際呈現兩個不同的元素。

4.另一個需要考慮的選項是ng-class指令。

這可以如下使用。

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

如果video.large是真的,以上基本上會為div元素添加一個large-video css類。

更新: Angular 1.1.5引入了ngIf directive

5. ng-if指令:

1.1.5以上的版本中,你可以使用ng-if指令。 如果提供的表達式返回false ,則會移除元素,如果表達式返回false ,則將該element重新插入到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>

我想在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迭代視頻。 不知道該怎麼處理這種情況:

  • 在範圍中添加一個函數?
  • 在模板中做?

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>

三元是做這件事最明顯的方法。

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

在最新版本的Angular(自1.1.5開始)中,它們包含一個名為ngIf的條件指令。 它與ngShowngHide不同之處在於元素不被隱藏,但根本不包含在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>

您可以直接使用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>

我同意三元組非常乾淨。 雖然我需要顯示div或p或table,但是由於顯而易見的原因,我不喜歡三元組,所以它看起來非常具有情境性。 打一個函數的調用通常是理想的,或者在我的情況下,我這樣做了:

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




angularjs