와 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하고 각 값을 지정하지 마십시오?
답변:
<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>동료 가 읽을 수 있는지 확인하십시오. :)
ng-class="{'class1': ##condition1## , 'class2': ##condition2## }"위의 질문에서 볼 수 있듯이
다음과 같은 기능을 사용하여 시도 할 수 있습니다.
<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'또는 기본값이 될 수있는 두 가지 'if'문이 필요했습니다.
ng-class="{'class-one' : value.one , 'class-two' : value.two}" class="else-class"value.one 및 value.two가 true 인 경우 .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 : abc, 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>추신 : 상태에있는 클래스는 기본 클래스를 무시해야합니다.
이것이 가장 신뢰할 수있는 방법입니다. 다음은 간단한 예이며 그 후 사용자 정의 논리를 개발할 수 있습니다.
//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-class에서 사용합니다.
ng-class="{'bg-empty': liststate == 'empty', 'bg-notempty': liststate == 'notempty', 'bg-init': liststate = 'init'}"