AngularJS 템플릿의 삼항 연산자

239

템플릿에서 AngularJS로 삼항을 어떻게 수행합니까?

컨트롤러의 함수를 작성하고 호출하는 대신 html 속성 (클래스 및 스타일)에 일부를 사용하는 것이 좋습니다.

— 크립 톨
소스

374

업데이트 : Angular 1.1.5는 삼항 연산자를 추가 했으므로 이제 간단히 작성할 수 있습니다.

<li ng-class="$first ? 'firstRow' : 'nonFirstRow'">

이전 버전의 Angular를 사용하는 경우 두 가지 선택은 다음과 같습니다.

(condition && result_if_true || !condition && result_if_false)
{true: 'result_if_true', false: 'result_if_false'}[condition]

위의 항목 2는 두 가지 속성을 가진 객체를 만듭니다. 배열 구문은 이름이 true 인 속성 또는 이름이 false 인 속성을 선택하고 관련 값을 반환하는 데 사용됩니다.

예 :

<li class="{{{true: 'myClass1 myClass2', false: ''}[$first]}}">...</li>
 or
<li ng-class="{true: 'myClass1 myClass2', false: ''}[$first]">...</li>

$ first는 첫 번째 요소의 ng-repeat 내에서 true로 설정되므로 위의 루프에서 처음으로 'myClass1'및 'myClass2'클래스를 적용합니다.

ng-class를 사용하면 더 쉬운 방법이 있습니다. ng-class는 다음 중 하나로 평가되어야하는 표현식을 사용합니다.

공백으로 구분 된 클래스 이름의 문자열
클래스 명의 배열
부울 값에 대한 클래스 이름의 맵 / 객체

1)의 예는 위에 주어졌다. 다음은 3의 예입니다.

 <li ng-class="{myClass: $first, anotherClass: $index == 2}">...</li>

ng-repeat 루프를 통해 처음으로 myClass 클래스가 추가됩니다. 세 번째 ($ index는 0에서 시작)까지 클래스 anotherClass가 추가됩니다.

ng-style 은 CSS 스타일 이름의 맵 / 객체를 CSS 값으로 평가해야하는 표현식을 사용합니다. 예 :

 <li ng-style="{true: {color: 'red'}, false: {}}[$first]">...</li>

— 마크 라지 콕
소스

6

질문을 업데이트 한 것에 대해 다시 한 번 투표하겠습니다.

— Narretz

2

내가 돌 볼게, @Narretz.

— Ian Hunter

1

객체 키 액세스 예제에서 빈 문자열이므로 'false'키를 건너 뛸 수 있습니다.

— 0xc0de

경고 단어 1.1.5는 현재 안정적이지 않습니다.

— Adam Grant

모델이 업데이트 될 때 조건이 변경되면 어떻게됩니까? ng-style업데이트 하고 싶지만 요소가 처음 렌더링 될 때만 평가되는 것 같습니다. (Angular noob here)

— Hartley Brody

86

업데이트 : Angular 1.1.5는 삼항 연산자를 추가 했으며이 대답은 1.1.5 이전 버전에만 정확합니다. 1.1.5 이상의 경우 현재 허용되는 답변을 참조하십시오.

각도 1.1.5 이전 :

angularjs의 삼항 형태는 다음과 같습니다.

((condition) && (answer if true) || (answer if false))

예를 들면 다음과 같습니다.

<ul class="nav">
    <li>
        <a   href="#/page1" style="{{$location.path()=='/page2' && 'color:#fff;' || 'color:#000;'}}">Goals</a>
    </li>
    <li>
        <a   href="#/page2" style="{{$location.path()=='/page2' && 'color:#fff;' || 'color:#000;'}}">Groups</a>
    </li>
</ul>

또는:

 <li  ng-disabled="currentPage == 0" ng-click="currentPage=0"  class="{{(currentPage == 0) && 'disabled' || ''}}"><a> << </a></li>

— 크립 톨
소스

1

기묘한. 그리 직관적이지 않습니다. 왜 이런 식으로 구현되었는지 궁금합니다.

— 벤 레시

4

Ternary는 절대로 흠이 없었지만, 이진 연산자를 사용하는 방식을 사용하고 있습니다.

— 앤드류 조슬린

18

@blesh, AngularJS는 테스트 가능성을 높입니다. 템플릿에는 로직이 없어야합니다. 테스트 가능성을 높이려면 템플릿의 삼항 연산자를 컨트롤러에 대한 함수 호출로 리팩터링해야합니다.

— Marcello Nuccio

1

@ arg20 ngClass 지시어 (또는 ngClassEven 및 ngClassOdd)를 사용해야합니다. 그런 다음 컨트롤러에서 CSS 클래스를 선택하기위한 모든 논리를 넣으십시오. 이것은 자동 테스트가 훨씬 쉽습니다.

— Marcello Nuccio

1

@ arg20 나는 모델이 아니라 컨트롤러에 넣었다고 말했다. 이것은 문제가되지 않습니다. 그러나이 문서는 "평가 결과는 공백으로 구분 된 클래스 이름, 배열 또는 클래스 이름을 부울 값으로 매핑하는 문자열을 나타낼 수 있습니다"라고 말합니다. "{cssclass : someBoolCheck ()}"를 표현식으로 사용할 수 있음을 의미합니다. 즉, css 클래스를 뷰에, 로직을 컨트롤러에 넣습니다. 예제 는 이 jsFiddle 을 보십시오 .

— Marcello Nuccio

23

각도 템플릿의 텍스트 ( userType$ scope.userType과 같은 $ scope의 속성) :

<span>
  {{userType=='admin' ? 'Edit' : 'Show'}}
</span>

— 익롬
소스

11

이제 우리는 버전 1.1.5 에 $parse함수에 적절한 삼항이 포함되어 있음을 알았 으므로 필터의 예제 로이 대답을 사용하십시오.

angular.module('myApp.filters', [])

  .filter('conditional', function() {
    return function(condition, ifTrue, ifFalse) {
      return condition ? ifTrue : ifFalse;
    };
  });

그런 다음

<i ng-class="checked | conditional:'icon-check':'icon-check-empty'"></i>

— 얀
소스

2

나는 삼항 연산자를 위해이 질문에 왔지만 결국 필터를 사용하여 정말 좋았습니다 ... = D

— slacktracer

10

삼항 연산자가 1.1.5 에서 각도 파서에 추가되었습니다 ! 변경 내역 참조

다음은 ng-class 지시문에 사용되는 새로운 삼항 연산자를 보여주는 바이올린 입니다.

ng-class="boolForTernary ? 'blue' : 'red'"

— 사자 뿌리
소스

10

condition && if-true-part || if-false-part이전 버전의 angular에서는 -syntax를 사용할 수 있지만 일반적인 삼항 연산자 condition ? true-part : false-part는 Angular 1.1.5 이상 에서 사용할 수 있습니다 .

— 알렉산더 블롬 스 콜트
소스

0

  <body ng-app="app">
  <button type="button" ng-click="showme==true ? !showme :showme;message='Cancel Quiz'"  class="btn btn-default">{{showme==true ? 'Cancel Quiz': 'Take a Quiz'}}</button>
    <div ng-show="showme" class="panel panel-primary col-sm-4" style="margin-left:250px;">
      <div class="panel-heading">Take Quiz</div>
      <div class="form-group col-sm-8 form-inline" style="margin-top: 30px;margin-bottom: 30px;">

        <button type="button" class="btn btn-default">Start Quiz</button>
      </div>
    </div>
  </body>

버튼 전환 및 버튼 헤더 변경 및 div 패널 표시 / 숨기기. 참고 항목 Plunkr을

— 자히드 라만
소스