ng-classadalah Arahan Inti Angular. Di mana Anda dapat menggunakan "Sintaks String", "Sintaks Array", "Ekspresi Evaluasi", "Operator Ternary" dan banyak lagi opsi yang dijelaskan di bawah ini:
ngClass Menggunakan Sintaks String
Ini adalah cara paling sederhana untuk menggunakan ngClass. Anda bisa menambahkan variabel Angular ke kelas-ng dan itu adalah kelas yang akan digunakan untuk elemen itu.
<!-- 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!
Contoh Demo dari ngClass Menggunakan String Syntax
ngClass Menggunakan Sintaks Array
Ini mirip dengan metode sintaksis string kecuali Anda dapat menerapkan beberapa kelas.
<!-- 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 Menggunakan Ekspresi yang Dievaluasi
Metode yang lebih maju dalam menggunakan ngClass (dan yang mungkin paling sering Anda gunakan) adalah mengevaluasi ekspresi. Cara kerjanya adalah jika variabel atau ekspresi mengevaluasi true, Anda bisa menerapkan kelas tertentu. Jika tidak, maka kelas tidak akan diterapkan.
<!-- 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 }">
Contoh ngClass Menggunakan Ekspresi yang Dievaluasi
ngClass Menggunakan Nilai
Ini mirip dengan metode ekspresi yang dievaluasi kecuali Anda hanya bisa membandingkan beberapa nilai dengan satu-satunya variabel.
<div ng-class="{value1:'class1', value2:'class2'}[condition]"></div>
ngClass Menggunakan Operator Ternary
Operator ternary memungkinkan kita menggunakan singkatan untuk menentukan dua kelas yang berbeda, satu jika ekspresi benar dan satu untuk false. Berikut adalah sintaks dasar untuk operator ternary:
ng-class="$variableToEvaluate ? 'class-if-true' : 'class-if-false'">
Mengevaluasi Nomor Pertama, Terakhir atau Spesifik
Jika Anda menggunakan ngRepeatdirektif dan Anda ingin menerapkan kelas ke first, lastatau nomor tertentu dalam daftar, Anda dapat menggunakan sifat khusus dari ngRepeat. Ini termasuk $first, $last, $even, $odd, dan beberapa orang lainnya. Berikut ini contoh cara menggunakannya.
<!-- 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>