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.
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.
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.
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ả.
Như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.
Thay giá trị này vào controller.
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.
Đú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.
Chúng ta được kết quả như sau.
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!
Codeaholicguy 
Bài viết rất hấp dẫn, cảm ơn tác giả nhiều