มีวิธีใดบ้างในการแสดงความรู้สึกng-classที่มีเงื่อนไข?

ตัวอย่างเช่นฉันได้ลองทำสิ่งต่อไปนี้:

<span ng-class="{test: 'obj.value1 == \'someothervalue\''}">test</span>

ปัญหาของรหัสนี้คือไม่ว่าจะเกิดอะไรobj.value1ขึ้นการทดสอบในชั้นเรียนจะถูกนำไปใช้กับองค์ประกอบเสมอ ทำสิ่งนี้:

<span ng-class="{test: obj.value2}">test</span>

ตราบobj.value2ใดที่ไม่เท่ากับค่าความจริงชั้นเรียนที่ไม่ได้ใช้ ตอนนี้ฉันสามารถแก้ไขปัญหาในตัวอย่างแรกโดยทำสิ่งนี้:

<span ng-class="{test: checkValue1()}">test</span>

ที่checkValue1ฟังก์ชั่นมีลักษณะเช่นนี้

$scope.checkValue1 = function() {
  return $scope.obj.value === 'somevalue';
}

ฉันแค่สงสัยว่านี่เป็นวิธีng-classการทำงาน ฉันกำลังสร้างคำสั่งที่กำหนดเองซึ่งฉันต้องการทำสิ่งที่คล้ายกับสิ่งนี้ อย่างไรก็ตามฉันไม่สามารถหาวิธีดูการแสดงออก (และอาจเป็นไปไม่ได้และสาเหตุที่มันเป็นเช่นนี้)

นี่คือplnkrเพื่อแสดงสิ่งที่ฉันหมายถึง

ความพยายามครั้งแรกของคุณเกือบจะถูกต้องควรทำงานโดยไม่มีเครื่องหมายคำพูด

{test: obj.value1 == 'someothervalue'}

นี่คือplnkr

ngClass สั่งจะทำงานร่วมกับการแสดงออกใด ๆ ที่ประเมิน truthy หรือ falsey บิตคล้ายกับการแสดงออก Javascript แต่มีความแตกต่างบางอย่างที่คุณสามารถอ่านเกี่ยวกับที่นี่ หากเงื่อนไขของคุณซับซ้อนเกินไปคุณสามารถใช้ฟังก์ชันที่ส่งกลับค่าความจริงหรือเท็จตามที่คุณทำในการลองครั้งที่สาม

เพียงเพื่อเสริม: คุณสามารถใช้ตัวดำเนินการเชิงตรรกะเพื่อจัดทำนิพจน์ทางตรรกะเช่น

ng-class="{'test': obj.value1 == 'someothervalue' || obj.value2 == 'somethingelse'}"

การใช้ ng-class ภายใน ng-repeat

<table>
    <tbody>
            <tr ng-repeat="task in todos"
                ng-class="{'warning': task.status == 'Hold' , 'success': task.status == 'Completed',
              'active': task.status == 'Started', 'danger': task.status == 'Pending' } ">
                <td>{{$index + 1}}</td>
                <td>{{task.name}}</td>
                <td>{{task.date|date:'yyyy-MM-dd'}}</td>
                <td>{{task.status}}</td>
            </tr>
    </tbody>
</table>

สำหรับแต่ละสถานะใน task.status จะใช้คลาสที่แตกต่างกันสำหรับแถวนั้น

JS เชิงมุมให้การทำงานในDirective NG-ระดับ ซึ่งคุณสามารถใส่เงื่อนไขและกำหนดคลาสที่มีเงื่อนไขได้ คุณสามารถทำสิ่งนี้ได้สองวิธี

ประเภทที่ 1

<div ng-class="{0:'one', 1:'two',2:'three'}[status]"></div>

ในคลาสรหัสนี้จะถูกนำไปใช้ตามมูลค่าของค่าสถานะ

ถ้าค่าสถานะเป็น0 ให้ใช้คลาสหนึ่ง

ถ้าค่าสถานะเป็น1 ให้ใช้คลาสสอง

ถ้าค่าสถานะเป็น2 ให้ใช้คลาสที่สาม

ประเภทที่ 2

<div ng-class="{1:'test_yes', 0:'test_no'}[status]"></div>

ในชั้นเรียนใดจะถูกนำไปใช้โดยมูลค่าของสถานะ

ถ้าค่าสถานะเป็น1 หรือเป็นจริงมันจะเพิ่มคลาสtest_yes

ถ้าค่าสถานะเป็น0 หรือเท็จมันจะเพิ่มคลาสtest_no

ฉันเห็นตัวอย่างที่ดีด้านบน แต่พวกเขาทั้งหมดเริ่มต้นด้วยวงเล็บปีกกา (แผนที่ json) อีกทางเลือกหนึ่งคือการส่งคืนผลลัพธ์ตามการคำนวณ ผลลัพธ์อาจเป็นรายการของชื่อคลาส css (ไม่ใช่แค่แม็พ) ตัวอย่าง:

ng-class="(status=='active') ? 'enabled' : 'disabled'"

หรือ

ng-class="(status=='active') ? ['enabled'] : ['disabled', 'alik']"

คำอธิบาย: หากสถานะแอ็คทีฟคลาสenabledจะถูกใช้ มิฉะนั้นdisabledจะใช้คลาส

รายการ[]นี้ใช้สำหรับการใช้หลายคลาส (ไม่ใช่แค่หนึ่งคลาส)

มีวิธีง่าย ๆ ที่คุณสามารถใช้กับ html class attribute และ shorthand if / else ไม่จำเป็นต้องทำให้ซับซ้อน เพียงใช้วิธีการต่อไปนี้

<div class="{{expression == true ? 'class_if_expression_true' : 'class_if_expression_false' }}">Your Content</div>

การเข้ารหัสที่มีความสุข Nimantha Perera

ฉันจะแสดงสองวิธีที่คุณสามารถใช้ ng-class ได้แบบไดนามิก

ขั้นตอนที่ 1

โดยใช้ผู้ประกอบการที่สาม

<div ng-class="condition?'class1':'class2'"></div>

เอาท์พุต

หากเงื่อนไขของคุณเป็นจริงแล้ว class1 จะถูกนำไปใช้กับองค์ประกอบของคุณมิฉะนั้น class2 จะถูกนำไปใช้

ข้อเสียเปรียบ

เมื่อคุณจะพยายามเปลี่ยนค่าตามเงื่อนไข ณ เวลารันคลาสจะไม่เปลี่ยนแปลง ดังนั้นฉันจะแนะนำให้คุณไปที่ขั้นตอนที่ 2 หากคุณมีความต้องการเช่นการเปลี่ยนคลาสแบบไดนามิก

ขั้นตอนที่ 2

<div ng-class="{value1:'class1', value2:'class2'}[condition]"></div>

เอาท์พุต

หากเงื่อนไขของคุณตรงกับ value1 class1 จะถูกนำไปใช้กับองค์ประกอบของคุณหากตรงกับ value2 แล้ว class2 จะถูกนำไปใช้และอื่น ๆ และการเปลี่ยนแปลงระดับไดนามิกจะทำงานได้ดีกับมัน

หวังว่านี่จะช่วยคุณได้

ไวยากรณ์เชิงมุมคือการใช้ตัวดำเนินการ:เพื่อดำเนินการเทียบเท่าของตัวดัดแปลงif

<div ng-class="{ 'clearfix' : (row % 2) == 0 }">

เพิ่มคลาส clearfix ไปยังแถว อย่างไรก็ตามการแสดงออกอาจเป็นสิ่งที่เราสามารถมีได้ตามปกติถ้าเงื่อนไขและควรประเมินว่าจริงหรือเท็จ

การใช้ฟังก์ชั่นกับ ng-class เป็นตัวเลือกที่ดีเมื่อใครบางคนต้องเรียกใช้ตรรกะที่ซับซ้อนเพื่อตัดสินใจคลาส CSS ที่เหมาะสม

http://jsfiddle.net/ms403Ly8/2/

HTML:

<div ng-app>
  <div ng-controller="testCtrl">
        <div ng-class="getCSSClass()">Testing ng-class using function</div>       
    </div>
</div>

CSS:

.testclass { Background: lightBlue}

จาวาสคริปต์ :

function testCtrl($scope) {
    $scope.getCSSClass = function() {
     return "testclass ";
  }     
}

ใช้สิ่งนี้

<div ng-class="{states}[condition]"></div>

ตัวอย่างเช่นหากเงื่อนไขคือ [2 == 2] สถานะคือ {true: '... ', false: '... '}

<div ng-class="{true: 'ClassA', false: 'ClassB'}[condition]"></div>

สำหรับ Angular 2 ให้ใช้สิ่งนี้

<div [ngClass]="{'active': dashboardComponent.selected_menu == 'mapview'}">Content</div>

ng-classเป็นคำสั่งของแกน AngularJs ซึ่งคุณสามารถใช้ "String Syntax", "Array Syntax", "Evaluated Expression", "Ternary Operator" และตัวเลือกอื่น ๆ อีกมากมายที่อธิบายไว้ด้านล่าง:

ngClass ใช้ไวยากรณ์สตริง

นี่เป็นวิธีที่ง่ายที่สุดในการใช้ ngClass คุณสามารถเพิ่มตัวแปร Angular ให้กับ ng-class และนั่นคือคลาสที่จะใช้สำหรับองค์ประกอบนั้น

<!-- whatever is typed into this input will be used as the class for the div below -->
<input type="text" ng-model="textType">

<!-- the class will be whatever is typed into the input box above -->
<div ng-class="textType">Look! I'm Words!

ตัวอย่างการสาธิตของngClass การใช้ไวยากรณ์สตริง

ngClass ใช้ไวยากรณ์ของอาร์เรย์

สิ่งนี้คล้ายกับวิธีไวยากรณ์สตริงยกเว้นว่าคุณจะสามารถใช้หลายคลาสได้

<!-- both input boxes below will be classes for the div -->
<input type="text" ng-model="styleOne">
<input type="text" ng-model="styleTwo">

<!-- this div will take on both classes from above -->
<div ng-class="[styleOne, styleTwo]">Look! I'm Words!

ngClass ใช้การประเมินผลการแสดงออก

วิธีการขั้นสูงของการใช้ ngClass (และวิธีที่คุณอาจใช้มากที่สุด) คือการประเมินค่านิพจน์ วิธีการทำงานนี้คือถ้าตัวแปรหรือนิพจน์ประเมินtrueคุณสามารถใช้คลาสที่แน่นอน ถ้าไม่เช่นนั้นคลาสจะไม่ถูกนำไปใช้

<!-- input box to toggle a variable to true or false -->
<input type="checkbox" ng-model="awesome"> Are You Awesome?
<input type="checkbox" ng-model="giant"> Are You a Giant?

<!-- add the class 'text-success' if the variable 'awesome' is true -->
<div ng-class="{ 'text-success': awesome, 'text-large': giant }">

ตัวอย่างของngClass โดยใช้ Expression ที่ประเมินค่า

ngClass การใช้ค่า

วิธีนี้คล้ายกับวิธีการแสดงออกที่ได้รับการประเมินยกเว้นคุณสามารถเปรียบเทียบค่าหลายค่ากับตัวแปรเท่านั้น

<div ng-class="{value1:'class1', value2:'class2'}[condition]"></div>

ngClass การใช้ผู้ประกอบการ Ternary

ผู้ประกอบการที่ประกอบไปด้วยไตรภาคอนุญาตให้เราใช้ชวเลขและระบุสองชั้นที่แตกต่างกันหนึ่งถ้าการแสดงออกเป็นจริงและหนึ่งสำหรับเท็จ นี่คือไวยากรณ์พื้นฐานสำหรับผู้ประกอบการที่ประกอบไปด้วย:

ng-class="$variableToEvaluate ? 'class-if-true' : 'class-if-false'">

การประเมินจำนวนแรก, สุดท้ายหรือเฉพาะ

หากคุณกำลังใช้ngRepeatคำสั่งและคุณต้องการที่จะใช้เรียนไปfirst, หรือหมายเลขเฉพาะในรายการคุณสามารถใช้คุณสมบัติพิเศษของlast ngRepeatเหล่านี้รวมถึง$first, $last, $even, $oddและอื่น ๆ ไม่กี่ นี่คือตัวอย่างของวิธีการใช้สิ่งเหล่านี้

<!-- add a class to the first item -->
<ul>
  <li ng-class="{ 'text-success': $first }" ng-repeat="item in items">{{ item.name }}</li>
</ul>

<!-- add a class to the last item -->
<ul>
  <li ng-class="{ 'text-danger': $last }" ng-repeat="item in items">{{ item.name }}</li>
</ul>

<!-- add a class to the even items and a different class to the odd items -->
<ul>
  <li ng-class="{ 'text-info': $even, 'text-danger': $odd }" ng-repeat="item in items">{{ item.name }}</li>
</ul>