Web Design

Angularjs, Bài 7: Giới thiệu về ngSrc, ngHref và ngClass

Qua bài trước về ngShow, ngHide, ngRepeat và filter, tôi tin rằng bạn đã có các kiến thức khá chắc chắn về AngularJS rồi. Với hướng tiếp nhận tương tự, lần này chúng ta sẽ tìm hiểu về ngSrc, ngHref và ngClass.

AngularJS

1. ngSrc

Bây giờ giả sử bạn có một array chứa tên của các ảnh và một <img> để hiển thị ảnh tương ứng, khi người dùng chọn ảnh nào từ danh sách thì <img> lập tức cập nhật lại src của nó. Đối với JS cơ bản thì bạn có function như bên dưới:

Tuy nhiên, mọi thứ sẽ đơn giản hơn với AngularJS. Bạn có thể code ngay phần src cho img thẳng trong HTML luôn mà không cần làm ở JS cũng như gán event bằng tay. Tất cả chỉ đơn giản là dùng angular expression với một ngModel trung gian là được. Nhưng có một điều phiền phức, và tôi sẽ giải thích sau khi bạn đọc dòng code trích ngang bên dưới:

Trong đó, imgSrc là một ngModel được khai báo ở một HTML element khác. Kết quả là, thẻ <img> có trạng thái nắng mưa thất thường, tức là có khi attr src nhận đúng giá trị của {{imgSrc}} và hiện đúng tấm ảnh bạn muốn, có khi lại nhận luôn cái String “{{imgSrc}}” làm src và kết quả là không tìm thấy ảnh. Để khắc phục vấn đề này thì AngularJS đưa ra một directive dạng attribute tương ứng với src của <img> là ngSrc. Và phần code chỉ đơn giản là:

Vậy là xong. Ngoài ra, bạn có thể nối String với ngSrc cũng như các ng directives khác. Ví dụ:

2. ngHref

Hoàn toàn tương tự như trên, lần này là với attr href của <a>. Tôi nghĩ mình sẽ không cần giải thích nhiều ở đây mà chỉ đưa ra ví dụ là đủ:

3. ngClass

Không những chỉ có tác dụng với các attr thông thường như src và href, bạn còn có thể dùng angular expression cho tên class nữa. Và ngClass sẽ giúp bạn “thi triển” điều này. Hay chưa?

Nếu tôi gán giá trị cho klazz là red thì lập tức <p> sẽ có class là .red và màu của chữ sẽ là đỏ. Còn khi tôi gán giá trị cho klazzblue thì, như bạn đang dự đoán, <p> sẽ chuyển sang thi đấu cho đội xanh dương với bằng chứng là dòng chữ sẽ trở thành màu xanh dương. Còn nếu giá trị của klazz là yellow thì… bó tay vì class yellow chưa được định nghĩa.

Ngoài ra, AngularJS còn cung cấp cho chúng ta hai directives đi kèm với ngClassngClassEvenngClassOdd. Đối với các bạn chưa cứng tiếng Anh, thì even có nghĩa là (số) chẵn (chứ không phải “thậm chí”), còn odd nghĩa là (số) lẻ (không phải “lập dị” trong trường hợp này bạn à). Chúng rất hữu hiệu đối với các thẻ <li>, chẳng hạn:

Ở đây bạn không cần thiết phải canh chừng để đặt class cho đúng cho các <li> ở các vị trí chẵn lẻ, chỉ cần “sao y bản chính” ng-class-even và ng-class-odd là được, tự nó sẽ gán class đúng cho bạn luôn. Tiện lợi quá phải không? Tôi nghĩ là bạn sẽ thích chúng cũng như những directives tôi đã nói trong bài trước. Và bạn sẽ càng yêu thích chúng hơn nữa khi kết hợp với các directive về events như click, focus, dbclick, submit, v.v… mà tôi sẽ giới thiệu ở bài sau.

Nhưng trước khi chia tay, sẽ là một thiếu sót vô cùng lớn nếu không nói tới việc toggle class của element bằng ng-class. Ngoài việc chỉ gán 1 class duy nhất với ng-class, bạn còn có thể gán nhiều class khác nhau với ng-class dưới dạng String, Map Object hay Array hoặc Map in Array đều được. Chẳng hạn:

Hãy chú ý vào <p> đầu tiên có ng-class dưới dạng Map Object. Ở mỗi phần từ của map thì vế trái, tức phần key, chính là tên CSS class, còn phần vế phải là value lại là một boolean. Value của red và bold là true, <p> sẽ có style của 2 class này, trong khi nó không chịu ảnh hưởng của big vì value của big là false. Như vậy, bạn có thể nghĩ ngay tới việc bật hoặc tắt một class trên một element bằng một boolean. Chẳng hạn, ở đây, tôi dùng các checkbox để toggle 3 class của <p>:

Have fun coding!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.