AngularJS 템플릿의 if else 문

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. 따라서 각 페이지에서 실제로 두 개의 다른 요소를 렌더링합니다.

4. 고려해야 할 또 다른 옵션은 ng-class지시입니다.

다음과 같이 사용할 수 있습니다.

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

위의 내용은 기본적으로 large-videodiv 요소에 css 클래스를 추가합니다 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. 요소가 숨겨지지는 않지만 DOM에 전혀 포함되지 않는다는 점 ngShow과 다릅니다 ngHide. 비용이 많이 들지만 사용되지 않는 구성 요소에 매우 유용합니다.

<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

In its own words, it's just "a simple collection of control flow directives: ng-if, ng-else-if, and ng-else." It's easy and intuitive to use.

Example:

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

---

You could use your video.yt$aspectRatio property directly by passing it through a filter, and binding the result to the height attribute in your template.

Your filter would look something like:

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

And the template would be:

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

---

In this case you want to "calculate" a pixel value depending of an object property.

I would define a function in the controller that calculates the pixel values.

In the controller:

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

Then in your template you just write:

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

---

I agree that a ternary is extremely clean. Seems that it is very situational though as somethings I need to display div or p or table , so with a table I don't prefer a ternary for obvious reasons. Making a call to a function is typically ideal or in my case I did this:

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

you can use the ng-if directive as above.

---

A possibility for Angular: I had to include an if - statement in the html part, I had to check if all variables of an URL that I produce are defined. I did it the following way and it seems to be a flexible approach. I hope it will be helpful for somebody.

The html part in the template:

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

And the typescript part:

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

Thanks and best regards,

Jan

참고URL : https://stackoverflow.com/questions/15810278/if-else-statement-in-angularjs-templates