그렇지 않으면 Angular에 있는 문JS 템플릿

그렇지 않으면 Angular에 있는 문JS 템플릿

나는 Angular에서 조건을 하고 싶다.JS 템플릿유튜브 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가 제안했듯이 가장 깨끗한 방법은 다음과 같이 3진 연산자를 사용하는 것입니다.

<span>{{isLarge ? 'video.large' : 'video.small'}}</span>

2. 지시:

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

<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-show/ng-hide그러나 이것을 사용하면 실제로 큰 비디오와 작은 비디오 요소를 모두 렌더링하고, 그 다음에 그 비디오 요소를 충족하는 요소를 숨깁니다.ng-hide조건과 일치하는 조건을 나타냅니다.ng-show조건.각 페이지에서 실제로 두 가지 요소를 렌더링합니다.

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

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

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

위의 내용에 따라 기본적으로large-videodiv 요소에 대한 css 클래스:video.large진부하다.

업데이트: Angular 1.1.5에서는

5. 지시:

상기 버전에서는1.1.5를 사용할 수 있습니다.ng-if지시.제공된 식이 반환되면 요소가 제거됩니다.false를 재기동합니다.elementDOM에서 그 표현이 반환되면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.와는 다르다.ngShow그리고.ngHide요소는 숨겨져 있지 않지만 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>

Ternary는 이것을 하는 가장 확실한 방법이다.

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

각도 자체는 if/else 기능을 제공하지 않지만 다음 모듈을 포함하면 얻을 수 있습니다.

https://github.com/zachsnow/ng-elif

그 자체로는 "ng-if, ng-else-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을 표시해야 하는 상황이기 때문에 3진법이 아닌 것은 분명한 이유가 있는 것 같습니다.일반적으로 함수를 호출하는 것이 이상적입니다.내 경우는, 다음과 같이 했습니다.

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

위와 같이 ng-if 디렉티브를 사용할 수 있습니다.

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

감사와 안부를 전합니다,

1월

ng If else 문

ng-if="receiptData.cart == undefined ? close(): '' ;"

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