Series AngularJS cho người mới: Built-in Directives (Phần 2)

Trong bài trước, chúng ta đã tìm hiểu về một số built-in directives.

Tóm tắt lại một xíu.

  • ng-app: khai báo application trong page
  • ng-controller: khai báo controller trong page
  • ng-show/ng-hide: dùng để hiển thị, ẩn một thành phần nào đó trong page
  • ng-repeat: dùng để iterate thành phần list dữ liệu trong page

Nhìn lại application ta đã xây dựng qua các bài trước.

Selection_026

Bạn chợt nghĩ, thêm một chút hình ảnh về sản phẩm không phải rõ ràng hơn sao. Ta thêm vào mỗi object product một danh sách các hình ảnh gồm hình thumbnail và hình full như sau.

Selection_021

Giờ thì đơn giản là đem thuộc tính này để hiển thị thôi.

Selection_022

Chạy và xem thử chúng ta làm được gì.

Selection_025

Mọi thứ đều ổn.

Tuy nhiên AngularJS không khuyến khích bạn sử dụng thẳng value từ expression vào thuộc tính src của thẻ img, bởi vì khi sử dụng như vậy browser sẽ cố gắng load hình được truyền vào trong thuộc tính src trước khi expression được tính toán xong.

AngularJS đưa ra cho chúng ta một built-in directive khác là ng-src để làm việc load hình ảnh trong thẻ img. Sử dụng đơn giản như sau.

Selection_024

Sử dụng ng-src như một biện pháp an toàn khi load hình ảnh nhé. Hehe.

Tiếp theo, chúng ta muốn hiển thị nhiều thông tin về sản phẩm hơn, vì thế chúng ta tạo thêm một số tab thông tin về Giới thiệu, Cấu hình, Đánh giá sản phẩm.

Thêm các tab vào mỗi phần hiển thị sản phẩm.

Selection_027

Khi click vào mỗi tab tương ứng thì thông tin sẽ được hiển thị, AngularJS cung cấp cho chúng ta built-in directive ng-click để tùy chỉnh behavior mỗi khi đối tượng được gán directive được click.

Selection_029

Như các bạn thấy, tương ứng với mỗi tab được click, ta set lại value của biến tab, đặt một expression để theo dõi sự thay đổi của biến tab, vì AngularJS hỗ trợ two way binding nên khi ta click vào từng tab, giá trị tab sẽ được thay đổi và update ngay tức thì trên page.

Nói lan man một chút về two way binding, các bạn có thể hiểu là khi có bất kỳ sự thay đổi nào ở model, dữ liệu sẽ được phản ánh ngay tức thì lên template và ngược lại.

Selection_030

Chúng ta define các tab như bên dưới và tự hỏi làm sao để khi click thì hiển thị đúng tab.

Selection_031

Nào cũng nhớ lại các bài trước, chúng ta đã được biết về ng-show phải không nào, áp dụng vào trường hợp này, ta có.

Selection_032

Và nó hoạt động mượt mà như thế này.

Selection_033

Nhưng khi refresh page thì không có giá trị mặc định nào được set cho biến tab, chúng ta có thể giải quyết dễ dàng vấn đề này bằng cách sử dụng directive ng-init như thế này.

Selection_034

Như vậy chúng ta đã giải quyết cho trường hợp khi người dùng mới vào website và hiển thị tab thông tin mặc định là giới thiệu sản phẩm.

Tóm lại trong bài viết này, chúng ta đã biết thêm về một số built-in directives ng-click, ng-src, ng-init cũng như cách sử dụng chúng.

Source code trong series này các bạn có thể dễ dàng tìm thấy ở https://github.com/codeaholicguy/angular-tutorial.

Hẹn gặp lại các bạn trong những bài tiếp theo.

Happy coding!

Advertisements

3 thoughts on “Series AngularJS cho người mới: Built-in Directives (Phần 2)

  1. Hì, mình cố ý để nó là array nhiều obj image bên trong để thể hiện 1 sản phẩm có thể có nhiều hình ảnh đó bạn, chắc do data trùng nhau nên bạn bị confuse, cảm ơn đã góp ý nhé ;)

Bình luận

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Đăng xuất / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Đăng xuất / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Đăng xuất / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Đăng xuất / Thay đổi )

Connecting to %s