if-statement if - 如果else語句在AngularJS模板中




ngif bind (9)

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

你可以像上面那樣使用ng-if指令。

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

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

在這種情況下,您希望根據對象屬性“計算”一個像素值。

我會在控制器中定義一個計算像素值的函數。

在控制器中:


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

然後在你的模板中,你只需寫:


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


在最新版本的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>

Angular的可能性:我必須在html部分包含一個if語句,我必須檢查我生成的URL的所有變量是否都已定義。 我採用了以下方法,它似乎是一種靈活的方法。 我希望這會對​​某人有所幫助。

模板中的html部分:

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

打字稿部分:

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

感謝和問候,

一月


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>

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

<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屬性,通過將其傳遞給過濾器,並將結果綁定到模板中的height屬性。

你的過濾器看起來像這樣:

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

模板將是:

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

我發現了非常深入的視頻,涵蓋了$watch$apply$digest和digest週期:

以下是這些視頻中使用的幾張幻燈片來解釋這些概念(以防萬一以上鍊接被刪除/不工作)。

在上面的圖片中,“$ scope.c”沒有被監視,因為它沒有用在任何數據綁定中(在標記中)。 另外兩個( $scope.a$scope.b )將被監視。

從上面的圖片可以看出:AngularJS基於各自的瀏覽器事件捕獲事件,執行摘要循環(遍歷所有更改的手錶),執行監視功能並更新DOM。 如果不是瀏覽器事件,摘要循環可以使用$apply$digest手動觸發。

關於$apply$digest更多信息:





if-statement angularjs