ng-classlà một Chỉ thị của AngularJs cốt lõi. Trong đó bạn có thể sử dụng "Cú pháp chuỗi", "Cú pháp mảng", "Biểu thức được đánh giá", "Toán tử Ternary" và nhiều tùy chọn khác được mô tả bên dưới:
ngClass sử dụng chuỗi cú pháp
Đây là cách đơn giản nhất để sử dụng ngClass. Bạn chỉ có thể thêm một biến Angular vào ng-class và đó là lớp sẽ được sử dụng cho phần tử đó.
<!-- 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!
Ví dụ demo của ngClass bằng chuỗi cú pháp
ngClass sử dụng cú pháp mảng
Điều này tương tự như phương thức cú pháp chuỗi trừ bạn có thể áp dụng nhiều lớp.
<!-- 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 sử dụng biểu thức đánh giá
Một phương pháp nâng cao hơn của việc sử dụng ngClass (và một phương pháp mà bạn có thể sẽ sử dụng nhiều nhất) là đánh giá một biểu thức. Cách thức này hoạt động là nếu một biến hoặc biểu thức ước lượng true, bạn có thể áp dụng một lớp nhất định. Nếu không, lớp sẽ không được áp dụng.
<!-- 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 }">
Ví dụ về ngClass sử dụng biểu thức đánh giá
ngClass sử dụng giá trị
Điều này tương tự với phương thức biểu thức được đánh giá ngoại trừ bạn chỉ có thể so sánh nhiều giá trị với biến duy nhất.
<div ng-class="{value1:'class1', value2:'class2'}[condition]"></div>
ngClass Sử dụng toán tử Ternary
Toán tử ternary cho phép chúng ta sử dụng tốc ký để chỉ định hai lớp khác nhau, một nếu một biểu thức là đúng và một cho sai. Đây là cú pháp cơ bản cho toán tử ternary:
ng-class="$variableToEvaluate ? 'class-if-true' : 'class-if-false'">
Đánh giá số đầu tiên, số cuối hoặc số cụ thể
Nếu bạn đang sử dụng ngRepeatchỉ thị và bạn muốn áp dụng các lớp học vào first, lasthoặc một số cụ thể trong danh sách, bạn có thể sử dụng tính chất đặc biệt của ngRepeat. Chúng bao gồm $first, $last, $even, $odd, và một vài người khác. Đây là một ví dụ về cách sử dụng chúng.
<!-- 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>