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>
                                            

위의 내용은 기본적으로 video.large 가 진실 인 경우 div 요소에 large-video

업데이트: Angular 1.1.5가  ngIf directive지침을 도입했습니다.

5. ng-if 가이드 라인:

1.1.5 이상의 버전에서는 ng-if 지시문을 사용할 수 있습니다. 이렇게하면 제공된 표현식이 false true 반환하면 DOM에 element 가 다시 삽입됩니다. 다음과 같이 사용할 수 있습니다.

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

출처 : https://stackoverflow.com/questions/15810278/if-else-statement-in-angularjs-templates