- It costs 4 mins to read

Hôm nay, mình lại tiếp tục với một bài khác cũng về AngularJS.

AngularJS cung cấp một vài chức năng tuyệt vời để giúp chúng ta tạo một ứng dụng tương tác. AngularJS cung cấp một thứ gọi là Directives nhằm mục đích can thiệp và thay đổi DOM để đính vào một số hành vi Angular cụ thể vào các thành phần do ta quy định. Liên quan đến các xử lý về mặt giao diện, 2 directive được sử dụng thường xuyên bên cạnh ng-show, ng-hide, ng-if chính là directive ng-style và ng-class. Và bài viết này sẽ hướng dẫn bạn các cách sử dụng ng-class trong Project của bạn. Directive ng-class giúp chúng ta một số công việc tuyệt vời sau:

Using ngClass

ngClass Using String Syntax

Đây là cách sử dụng đơn giản nhất của ng-class, gán trực tiếp một biến của Angular vào trong directive 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!</div>

Đây là ví dụ:

See the Pen XXXzWP by Duong Vi Phat (@viphat) on CodePen.

ngClass Using Array Syntax

Tương tự như cách sử dụng String syntax nhưng áp dụng trong trường hợp bạn muốn apply nhiều class cùng lúc từ nhiều biến của AngularJS (Nếu bạn chỉ muốn dùng một biến thì vẫn có thể gán nhiều css class cho giá trị của biến đó - Ví dụ: $scope.style="text-center text-primary col-md-6")

<!-- 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!</div>
Sử dụng ngClass trong biểu thức điều kiện

Một cách advanced hơn khi sử dụng ng-class trong AngularJS là sử dụng các biểu thức điều kiện, khi biểu thức này true, class sẽ được apply.

<!-- 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 }">

Để sử dụng biểu thức trong ng-class thì bạn phải đặt trong cặp dấu { }, bên trái của biểu thức (phân cách nhau bởi dấu :) là class định apply (bạn nên đặt chúng trong dấu ‘’ để chứa các ký tự đặc biệt, dấu - và khoảng trắng). Bên phải của biểu thức là biến hoặc điều kiện.

Sử dụng ngClass với biểu thức Ternary Operator

ng-class cũng hỗ trợ biểu thức dưới dạng ternary operator

ng-class="$even ? 'even-row' : 'odd-row'">

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

ternary operator được dùng nhiều trong trường hợp bạn quy định các class khác nhau dựa vào giá trị true/false của một biến.

Dùng ngCass kết hợp với $first, $last, $index, $even, $odd

ng-class có thể dùng trong biểu thức điều kiện cùng với các biến của ng-repeat như $first, $last, $index, $even, $odd

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

<!-- add a class to the last item -->
<ul>
    <li ng-class="{ 'text-danger': $last }" ng-repeat="item in items"></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"></li>
</ul>

Các cách sử dụng ngClass

Directive ng-class có 2 cách sử dụng: như là một class và như là một attribute (tương ứng với restrict: "AC"). Bản thân mình thì quen dùng ng-class dưới dạng một attribute hơn, bởi vì nó sẽ rất rõ ràng trong việc phân biệt các class động và các class tĩnh được định nghĩa sẵn.

Sử dụng ngClass như một thành phần của thuộc tính Class
<!-- example with string syntax -->
<!-- use the type variable as a class -->
<div class="item ng-class:type;">Stuff Goes Here</div>

<!-- example with string syntax -->
<!-- use the styleOne and styleTwo variables as classes -->
<div class="item ng-class:[styleOne, styleTwo];">Stuff Goes Here</div>

<!-- example with evaluated data -->
<!-- add the text-error class if wrong is true -->
<div class="item ng-class:{ 'text-error': wrong };">Stuff Goes Here</div>
Sử dụng ngClass như một thuộc tính

github

<!-- example with string syntax -->
<!-- use the type variable as a class -->
<div class="item" ng-class="type">Stuff Goes Here</div>

<!-- example with string syntax -->
<!-- use the styleOne and styleTwo variables as classes -->
<div class="item" ng-class="[styleOne, styleTwo]">Stuff Goes Here</div>

<!-- example with evaluated data -->
<!-- add the text-error class if wrong is true -->
<div class="item" ng-class="{ 'text-error': wrong }">Stuff Goes Here</div>

Kết luận

Trên đây, mình đã liệt kê công dụng và các cách apply ng-class trong AngularJS 1.x, hy vọng chúng hữu ích cho bạn bởi ng-class sẽ đóng góp rất nhiều trong việc tạo một trang web sinh động trong AngularJs.