[javascript] AngularJS 템플릿의 삼항 연산자

JAVASCRIPT / 글쓴이

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

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

답변

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

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

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

  1. (condition && result_if_true || !condition && result_if_false)
  2. {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. 공백으로 구분 된 클래스 이름의 문자열
  2. 클래스 명의 배열
  3. 부울 값에 대한 클래스 이름의 맵 / 객체

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>

답변

업데이트 : 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>

답변

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

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

답변

이제 우리는 버전 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>

답변

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

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

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

답변

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

답변

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