[if-statement] AngularJS 템플릿의 if else 문

Program / 글쓴이

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

그 자체로는 간단히 말해서 “제어 흐름 지시문의 간단한 모음 : 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을 표시 해야하는 것으로 매우 상황에 맞는 것처럼 보이므로 테이블을 사용하면 분명한 이유로 삼항을 선호하지 않습니다. 함수를 호출하는 것이 일반적으로 이상적이거나 필자의 경우이 작업을 수행했습니다.

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