ด้วย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/
ฉันมีสถานการณ์ที่ฉันต้องการสองประโยค 'ถ้า' ที่อาจเป็นจริงและเป็น 'อื่น' หรือเป็นค่าเริ่มต้นหากไม่เป็นจริงไม่แน่ใจว่านี่เป็นการปรับปรุงคำตอบของ Jossef แต่ดูเหมือนว่าฉันจะสะอาดขึ้น:
ng-class="{'class-one' : value.one , 'class-two' : value.two}" class="else-class"โดยที่ value.one และ value.two เป็นจริงพวกมันจะอยู่เหนือคลาส. 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>คุณสามารถอ้างถึงหน้ารหัสเต็มได้ที่ตัวอย่างเช่น
วิธีการแก้ปัญหาข้างต้นไม่ได้ผลสำหรับชั้นเรียนด้วยภาพพื้นหลังอย่างใด สิ่งที่ฉันทำคือฉันสร้างคลาสเริ่มต้น (สิ่งที่คุณต้องการในอื่น) และตั้งค่า 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>PS: คลาสที่อยู่ในสภาพควรแทนที่คลาสเริ่มต้นเช่นทำเครื่องหมายเป็น! สำคัญ
นี่เป็นวิธีที่ดีที่สุดและเชื่อถือได้ในการทำเช่นนี้ นี่คือตัวอย่างง่ายๆและหลังจากนั้นคุณสามารถพัฒนาตรรกะที่กำหนดเองของคุณ:
//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-class:
ตัวอย่างเช่นฉันต้องการสลับคลาสตามสถานะของรายการของฉัน:
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'}"ใช้วิธีนี้:
<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'}