เราสามารถมีหลายนิพจน์เพื่อเพิ่มหลายคลาส ng ได้หรือไม่?
สำหรับเช่น
<div ng-class="{class1: expressionData1, class2: expressionData2}"></div>
ถ้ามีใครสามารถยกตัวอย่างที่จะทำ
.
เราสามารถมีหลายนิพจน์เพื่อเพิ่มหลายคลาส ng ได้หรือไม่?
สำหรับเช่น
<div ng-class="{class1: expressionData1, class2: expressionData2}"></div>
ถ้ามีใครสามารถยกตัวอย่างที่จะทำ
.
คำตอบ:
เมื่อต้องการใช้คลาสที่ต่างกันเมื่อนิพจน์ที่ต่างกันประเมินว่าtrue
:
<div ng-class="{class1 : expression1, class2 : expression2}">
Hello World!
</div>
เมื่อต้องการใช้หลายคลาสเมื่อนิพจน์มีค่าจริงให้ทำดังนี้
<!-- notice expression1 used twice -->
<div ng-class="{class1 : expression1, class2 : expression1}">
Hello World!
</div>
หรือค่อนข้างง่าย:
<div ng-class="{'class1 class2' : expression1}">
Hello World!
</div>
สังเกตเห็นคำพูดเดียวรอบ css เรียน
'class1 class2': expression
) ดูเหมือนว่าจะทำงานได้ดียกเว้นว่าถ้าคุณใช้คลาสอีกครั้งมันจะลดลงเมื่อนิพจน์สลับระหว่างตัวเลือก เช่นกับ'commonClass class1': expression == true, 'commonClass class2': expression == false
commonClass จะหายไปเนื่องจากการแสดงออกสลับระหว่างจริงและเท็จ
class="commonClass" ng-class={'class1' : expression, 'class2' : !expression}
ng-class="{'class1' : expression1, 'class2':expression1 }"
ไปได้ไหม คุณสนใจที่จะดูคำถามของฉัน: stackoverflow.com/questions/25391692/…
สำหรับสัญลักษณ์ประกอบการประกอบไปด้วย:
<div ng-class="expression1? 'class1 class2' : 'class3 class4'">
ng-class="[expression1? 'class1 class2' : 'class3 class4', expression2 ? 'class5' : 'class6']"
ใช่คุณสามารถมีหลายนิพจน์เพื่อเพิ่มหลายคลาสใน ng-class
ตัวอย่างเช่น:
<div ng-class="{class1:Result.length==2,class2:Result.length==3}"> Dummy Data </div>
ทางเลือกที่ทรงพลังอย่างไม่น่าเชื่อสำหรับคำตอบอื่น ๆ ที่นี่:
ng-class="[ { key: resulting-class-expression }[ key-matching-expression ], .. ]"
ตัวอย่างบางส่วน:
1. เพิ่ม 'class1 class2 class3' ลงใน div:
<div ng-class="[{true: 'class1'}[true], {true: 'class2 class3'}[true]]"></div>
2. เพิ่มคลาส 'คี่' หรือ 'คู่' เพื่อ div ขึ้นอยู่กับ $ index:
<div ng-class="[{0:'even', 1:'odd'}[ $index % 2]]"></div>
3. สร้างคลาสแบบไดนามิกสำหรับแต่ละ div โดยอ้างอิงจาก $ index
<div ng-class="[{true:'index'+$index}[true]]"></div>
หาก$index=5
สิ่งนี้จะส่งผลให้:
<div class="index5"></div>
นี่คือตัวอย่างโค้ดที่คุณสามารถเรียกใช้:
var app = angular.module('app', []);
app.controller('MyCtrl', function($scope){
$scope.items = 'abcdefg'.split('');
});
.odd { background-color: #eee; }
.even { background-color: #fff; }
.index5 {background-color: #0095ff; color: white; font-weight: bold; }
* { font-family: "Courier New", Courier, monospace; }
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<div ng-app="app" ng-controller="MyCtrl">
<div ng-repeat="item in items"
ng-class="[{true:'index'+$index}[true], {0:'even', 1:'odd'}[ $index % 2 ]]">
index {{$index}} = "{{item}}" ng-class="{{[{true:'index'+$index}[true], {0:'even', 1:'odd'}[ $index % 2 ]].join(' ')}}"
</div>
</div>
ng-class
คำสั่งที่ซับซ้อนมากขึ้นเช่นเมื่อฉันต้องการใช้ไตรภาคและนิพจน์มาตรฐานในองค์ประกอบเดียวกัน ฉันส่งการแก้ไขไปยังคำตอบที่ยอมรับแล้วเพื่อรวมการใช้อาร์เรย์ของนิพจน์
[{true:'index'+$index}[true], {0:'even', 1:'odd'}[ $index % 2 ]]
สามารถทำให้เป็นแบบนี้['index'+$index, {0:'even', 1:'odd'}[ $index % 2 ]]
ได้ง่าย ฉันเพิ่งลองใช้งานใน Angular 1.5.9 แล้วใช้งานได้ :) ขอบคุณสำหรับคำตอบที่ยอดเยี่ยม!
ใช้$scope
เมธอดบนคอนโทรลเลอร์คุณสามารถคำนวณว่าคลาสใดที่ต้องการเอาต์พุตในมุมมอง สิ่งนี้มีประโยชน์อย่างยิ่งหากคุณมีตรรกะที่ซับซ้อนสำหรับการคำนวณชื่อคลาสและจะลดจำนวนของตรรกะในมุมมองของคุณโดยการย้ายไปยังตัวควบคุม:
app.controller('myController', function($scope) {
$scope.className = function() {
var className = 'initClass';
if (condition1())
className += ' class1';
if (condition2())
className += ' class2';
return className;
};
});
และในมุมมองเพียง:
<div ng-class="className()"></div>
className
หรือไม่?
ng-
ผูกHTML เพื่อกำหนดว่าจะใช้คลาสใดเมื่อตรงกับเงื่อนไขนั้น
className
ถ้าใครใช้นี้พวกเขาจะต้องรวมถึงการเรียนที่ไม่ต้องมีเงื่อนไขในการกลับมา
ตัวอย่างของคุณใช้ได้กับคลาสที่มีเงื่อนไข (ชื่อคลาสจะแสดงถ้าexpressionDataX
มันเป็นจริง):
<div ng-class="{class1: expressionData1, class2: expressionData2}"></div>
คุณยังสามารถเพิ่มคลาสได้หลายคลาสซึ่งจัดทำโดยผู้ใช้องค์ประกอบ:
<div ng-class="[class1, class2]"></div>
การใช้งาน:
<div class="foo bar" class1="foo" class2="bar"></div>
{}
และระดับข้อมูลที่ถูกผูกไว้ใช้[]
?
ngClass
คำสั่งบนองค์ประกอบ
<a href="#/u/[[msg.from]]" ng-bind="msg.from" class="name, ng-class:[users[msg.from].nice, users[msg.from].star];" ng-class="{premium: users[msg.from].premium}"></a>
และอีกมากมาย: scotch.io/tutorials/javascript/the-many-ways-to-use-ngclass
นี่คือตัวอย่างการเปรียบเทียบสถานะ angular-ui-router หลาย ๆ ตัวโดยใช้ OR || ผู้ประกอบการ:
<li ng-class="
{
warning:
$state.includes('out.pay.code.wrong')
|| $state.includes('out.pay.failed')
,
active:
$state.includes('out.pay')
}
">
มันจะให้ Li คำเตือนชั้นเรียนและ / หรือการใช้งานขึ้นอยู่กับว่าเป็นไปตามเงื่อนไข
ด้านล่างใช้งานและ activemenu เป็นคลาสและ itemCount และ ShowCart เป็นค่าการแสดงออก / บูลีน
ng-class="{'active' : itemCount, 'activemenu' : showCart}"
มีหลายเงื่อนไข
<div ng-class="{'class1' : con1 || can2, 'class2' : con3 && con4}">
Hello World!
</div>
พบวิธีอื่นขอบคุณ Scotch.io
<div ng-repeat="step in steps" class="step-container step" ng-class="[step.status, step.type]" ng-click="onClick(step.type)">
นี่คือข้อมูลอ้างอิงของฉัน เส้นทาง
วิธีอื่นที่เราสามารถสร้างฟังก์ชั่นเพื่อควบคุม "การใช้หลายคลาส"
CSS
<style>
.Red {
color: Red;
}
.Yellow {
color: Yellow;
}
.Blue {
color: Blue;
}
.Green {
color: Green;
}
.Gray {
color: Gray;
}
.b {
font-weight: bold;
}
</style>
ต้นฉบับ
<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>
คุณสามารถอ้างถึงหน้ารหัสเต็มได้ที่ตัวอย่างเช่น