각도의 삼원 연산자JS 템플릿
(템플릿에서) AngularJs를 사용한 3진법은 무엇입니까?
컨트롤러의 함수를 작성하거나 호출하는 대신 html 속성(클래스 및 스타일)으로 사용하는 것이 좋습니다.
업데이트: Angular 1.1.5에 3진 연산자가 추가되어 이제 간단히 쓸 수 있습니다.
<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 반복 루프를 통해 처음으로 myClass 클래스가 추가됩니다.세 번째부터 ($index starts on 0), 클래스 anotherClass가 추가됩니다.
ng-style은 CSS 스타일 이름을 CSS 값에 매핑 또는 오브젝트로 평가해야 하는 식을 사용합니다.예.,
<li ng-style="{true: {color: 'red'}, false: {}}[$first]">...</li>
업데이트: Angular 1.1.5에 3진 연산자가 추가되었습니다.이 답변은 1.1.5 이전 버전에만 해당됩니다.1.1.5 이후의 경우는, 현재 허가되고 있는 회답을 참조해 주세요.
Angular 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에서 각도 파서에 3진 연산자가 추가되었습니다! changelog를 참조하십시오.
다음은 ng-class 지시어로 사용되는 새로운 3진 연산자를 보여 주는 바이올린입니다.
ng-class="boolForTernary ? 'blue' : 'red'"
를 사용할 수 있는 동안condition && if-true-part || if-false-part-일반적인 3원 연산자인 angular의 이전 버전에 적용됨condition ? true-part : false-part는 Angular 1.1.5 이상에서 사용할 수 있습니다.
이 답변은 버전 1.1.5보다 이전 버전입니다.여기서 적절한 3진법이$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>
<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 패널 표시/숨기기'플렁크' 참조
I'm과 같은 레거시 코드를 아직 작업 중인 사용자가 있다면 다음과 같이 ng-style 내의 3진 연산자를 사용하여 이 작업을 수행할 수도 있습니다.
<li ng-style="{'color': connected ? '#008000' : '#808080'}"></li>
언급URL : https://stackoverflow.com/questions/12008580/ternary-operator-in-angularjs-templates
'source' 카테고리의 다른 글
| 컬이 활성화 또는 비활성화되었는지 확인하는 방법 (0) | 2023.01.15 |
|---|---|
| 각도에서의 (변경) 대 (ngModelChange) (0) | 2023.01.15 |
| C의 char 배열과 char pointer의 차이점은 무엇입니까? (0) | 2023.01.15 |
| JAVA_의 올바른 타깃은 무엇입니까?리눅스 Open용 HOME 환경 변수JDK Debian 기반 배포? (0) | 2023.01.05 |
| SQLite 또는 MySql?어떻게 결정해요? (0) | 2023.01.05 |