AngularJS ng-class if-else 식
와 함께AngularJS사용하고 있다ng-class다음과 같이 합니다.
<div class="bigIcon" data-ng-click="PickUp()"
ng-class="{first:'classA', second:'classB', third:'classC', fourth:'classC'}[call.State]"/>
제가 이 제품을 사용할 수 있을까요?if-else다음과 같은 작업을 수행하기 위한 표현:
<div class="bigIcon" data-ng-click="PickUp()"
ng-class="{first:'classA', second:'classB', else:'classC'}[call.State]"/>
그래서 언제든지call.State다르다first또는second사용하다classC각 값을 지정하지 않아도 될까요?
중첩된 인라인 if-then 문 사용(Ternary 연산자)
<div ng-class=" ... ? 'class-1' : ( ... ? 'class-2' : 'class-3')">
예를 들어 다음과 같습니다.
<div ng-class="apt.name.length >= 15 ? 'col-md-12' : (apt.name.length >= 10 ? 'col-md-6' : 'col-md-4')">
...
</div>
동료가 읽을 수 있도록 해 주세요.
다음과 같은 함수를 사용하여 시도할 수 있습니다.
<div ng-class='whatClassIsIt(call.State)'>
다음으로 로직을 함수 자체에 넣습니다.
$scope.whatClassIsIt= function(someValue){
if(someValue=="first")
return "ClassA"
else if(someValue=="second")
return "ClassB";
else
return "ClassC";
}
예를 들어 http://jsfiddle.net/DotDotDot/nMk6M/를 만들었습니다.
두 개의 if 스테이트먼트가 필요했는데, 둘 다 사실이 아닌 경우 'else' 또는 디폴트 스테이트먼트가 필요했습니다.이것이 Josef의 답변보다 개선된 것인지 아닌지는 잘 모르겠지만, 나에게는 더 명확해 보였습니다.
ng-class="{'class-one' : value.one , 'class-two' : value.two}" class="else-class"
value. 1과 value. 2는 .else 클래스보다 우선합니다.
확실히!CSS 클래스명을 반환하는 함수를 만들 수 있습니다.이 함수는 완전한 예를 제시하겠습니다.
CSS
<style>
.Red {
color: Red;
}
.Yellow {
color: Yellow;
}
.Blue {
color: Blue;
}
.Green {
color: Green;
}
.Gray {
color: Gray;
}
.b{
font-weight: bold;
}
</style>
JS
<script>
angular.module('myapp', [])
.controller('ExampleController', ['$scope', function ($scope) {
$scope.MyColors = ['It is Red', 'It is Yellow', 'It is Blue', 'It is Green', 'It is Gray'];
$scope.getClass = function (strValue) {
if (strValue == ("It is Red"))
return "Red";
else if (strValue == ("It is Yellow"))
return "Yellow";
else if (strValue == ("It is Blue"))
return "Blue";
else if (strValue == ("It is Green"))
return "Green";
else if (strValue == ("It is Gray"))
return "Gray";
}
}]);
</script>
그리고 나서.
<body ng-app="myapp" ng-controller="ExampleController">
<h2>AngularJS ng-class if example</h2>
<ul >
<li ng-repeat="icolor in MyColors" >
<p ng-class="[getClass(icolor), 'b']">{{icolor}}</p>
</li>
</ul>
<hr/>
<p>Other way using : ng-class="{'class1' : expression1, 'class2' : expression2,'class3':expression2,...}"</p>
<ul>
<li ng-repeat="icolor in MyColors">
<p ng-class="{'Red':icolor=='It is Red','Yellow':icolor=='It is Yellow','Blue':icolor=='It is Blue','Green':icolor=='It is Green','Gray':icolor=='It is Gray'}" class="b">{{icolor}}</p>
</li>
</ul>
예를 들어 ng-class의 전체 코드 페이지를 참조할 수 있습니다.
배경 이미지가 있는 수업에서는 위의 해결 방법이 통하지 않았습니다.기본 클래스(필요한 클래스)를 만들고 class='defaultClass'를 설정한 다음 ng-class="{class1:class2:xyz}"를 설정합니다.
<span class="booking_warning" ng-class="{ process_success: booking.bookingStatus == 'BOOKING_COMPLETED' || booking.bookingStatus == 'BOOKING_PROCESSED', booking_info: booking.bookingStatus == 'INSTANT_BOOKING_REQUEST_RECEIVED' || booking.bookingStatus == 'BOOKING_PENDING'}"> <strong>{{booking.bookingStatus}}</strong> </span>
추신: 조건에 있는 클래스는 기본 클래스(!important로 표시된 클래스)를 덮어씁니다.
이것이 가장 신뢰할 수 있는 방법입니다.다음으로 간단한 예를 제시하겠습니다.그 후 커스텀로직을 개발할 수 있습니다.
//In .ts
public showUploadButton:boolean = false;
if(some logic)
{
//your logic
showUploadButton = true;
}
//In template
<button [class]="showUploadButton ? 'btn btn-default': 'btn btn-info'">Upload</button>
회피책으로는 ng 클래스 토글에 대해서만 모델 변수를 조작할 수 있습니다.
예를 들어 목록 상태에 따라 클래스를 전환합니다.
1) 목록이 비어 있을 때마다 모델을 업데이트합니다.
$scope.extract = function(removeItemId) {
$scope.list= jQuery.grep($scope.list, function(item){return item.id != removeItemId});
if (!$scope.list.length) {
$scope.liststate = "empty";
}
}
2) 리스트가 비어 있지 않을 때마다 다른 상태를 설정합니다.
$scope.extract = function(item) {
$scope.list.push(item);
$scope.liststate = "notempty";
}
3) 리스트가 터치되지 않은 경우, 다른 클래스(페이지가 시작되는 위치)를 지정하고 싶다.
$scope.liststate = "init";
3) 이 추가 모델을 ng 클래스에서 사용합니다.
ng-class="{'bg-empty': liststate == 'empty', 'bg-notempty': liststate == 'notempty', 'bg-init': liststate = 'init'}"
다음과 같이 사용합니다.
<div [ngClass]="{cssClass A: condition 1, cssClass B: condition 2, cssClass C: condition 3}">...</div>
다음의 방법을 시험해 볼 수 있습니다.
</p><br /><br />
<p>ng-class="{test: obj.value1 == 'someothervalue' || obj.value2 == 'somethingelse'}<br /><br /><br />
ng-class="{test: obj.value1 == 'someothervalue' || obj.value2 == 'somethingelse'}
자세한 내용은 이쪽에서 보실 수 있습니다.
언급URL : https://stackoverflow.com/questions/18172573/angularjs-ng-class-if-else-expression
'itsource' 카테고리의 다른 글
| ES6 구문을 사용하여 온클릭 이벤트를 통해 전달 매개 변수 반응 (0) | 2023.03.08 |
|---|---|
| 스프링 부트가 logging.path 변수를 수신하지 않는 이유는 무엇입니까? (0) | 2023.03.08 |
| 각을 조합하는 가장 좋은 방법JS 및 트위터 부트스트랩 (0) | 2023.03.08 |
| Ruby on Rails의 소셜 미디어 공유 버튼 보석 (0) | 2023.03.08 |
| angularjs에서의 단방향 바인딩과 쌍방향 바인딩의 차이 (0) | 2023.03.08 |