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

Trong bài trước chúng ta đã biết cách để hiện thị dữ liệu lên page bằng cách sử dụng Controller, hôm nay chúng ta cùng xem qua về các built-in directives trong Angular, hỗ trợ cho việc hiển thị dữ liệu.

Chúng ta đã hiển thị được sản phẩm, giờ chúng ta muốn thêm một button giúp người dùng thêm sản phẩm vào giỏ hàng của mình.

Chúng ta thêm một button để thêm sản phẩm vào giỏ vào phần hiển thị sản phẩm.

Selection_009

Nhưng có một điều phải lưu ý, chúng ta chỉ nên hiển thị button này khi sản phẩm đang còn hàng. Cùng nhìn qua object sản phẩm.

Selection_010

Chúng ta thấy chỉ nên hiển thị button này khi thuộc tính inStock là true và ngược lại.

Angular hỗ trợ chúng ta làm việc này bằng cách sử dụng built-in directive ng-show.

Cách sử dụng như sau.

Selection_011

Attribute của ng-show là expression mà chúng ta muốn kiểm tra. Khi giá trị được kiểm tra là false Angular sẽ add class ng-hide vào class của thẻ để ẩn thẻ đi.

Chạy và nhìn vào kết quả.

Selection_015Nhưng lại có thắc mắc, không lẽ một cửa hàng chỉ có duy nhất một sản phẩm, tất nhiên là không rồi, vậy là sao để hiển thị với một danh sách các sản phẩm.

Chúng ta có mảng các sản phẩm như thế này.

Selection_016

Thay giá trị này vào controller.

Selection_017

Giờ thì làm sao để hiển thị hết tất cả các sản phẩm này ra đây, có thể các bạn sẽ nghĩ về việc hiển thị lần lượt bằng index như thế này.

Selection_018

Đúng là như vậy có thể giải quyết được nhưng nếu danh sách sản phẩm dài ra thì khá là vất vả cho developer, haha. Không sao Angular hỗ trợ chúng ta iterate danh sách bằng cách sử dụng directive ng-repeat. Sử dụng như sau.

Selection_019

Chúng ta được kết quả như sau.

Selection_020

Như vậy chúng ta có thể hiển thị danh sách mà không cần phải hard code quá nhiều.

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

Qua ba bài đầu tiên của Series AngularJS chúng ta đã có thể nắm được một số khái niệm cơ bản về AngularJS. Tôi sẽ tóm tắt lại như sau.

  • Directive: là HTML annotation dùng để trigger các Javascript function, hay hiểu một cách tổng quát là behavior của application
  • Module: là nơi những thành phần của application được hiện thực
  • Controller: là nơi mà các behavior của application được hiện thực
  • Expression: là cách để hiển thị các giá trị lên page

Chúc các bạn vui với Angular, và hẹn gặp lại ở các bài tiếp theo trong series. Happy coding!

Advertisements

Trả lời

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 Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s