Vòng lặp th

Vòng lặp là một phần quan trọng của việc hiển thị dữ liệu trong ứng dụng web. Thymeleaf, một Java Template Engine phổ biến, cung cấp cú pháp mạnh mẽ để bạn có thể dễ dàng lặp qua danh sách dữ liệu và hiển thị chúng trên trang web. Trong bài viết này, chúng ta sẽ tìm hiểu về cú pháp th:each trong Thymeleaf, cùng với các ví dụ minh họa.

Vòng Lặp th:each Là Gì?

th:each là một cú pháp trong Thymeleaf cho phép bạn lặp qua danh sách hoặc bất kỳ tập hợp dữ liệu nào, và áp dụng một phần tử HTML cho mỗi phần tử trong danh sách. Điều này rất hữu ích khi bạn muốn hiển thị danh sách sản phẩm, bài viết, hoặc bất kỳ loại dữ liệu lặp lại nào trên trang web của bạn.

Dưới đây là cú pháp cơ bản của th:each:

<div th:each="item : ${items}">
  <!-- Nội dung bạn muốn hiển thị cho mỗi item -->
</div>

Trong đó:

• "item" là biến mà bạn sẽ sử dụng để tham chiếu đến mỗi phần tử trong danh sách.
• "${items}" là danh sách hoặc tập hợp dữ liệu bạn muốn lặp qua.

Ví dụ về Vòng Lặp th:each

Lặp qua Danh Sách Sản Phẩm

Dưới đây là một ví dụ về cách bạn có thể sử dụng th:each để hiển thị danh sách sản phẩm:

<ul>
  <li th:each="product : ${products}">
    <span th:text="${product.name}"></span>:
    <span th:text="${product.price}"></span> USD
  </li>
</ul>

Trong ví dụ này, chúng ta lặp qua danh sách products và hiển thị tên và giá của mỗi sản phẩm trong danh sách.

Lặp qua Danh Sách Người Dùng

Dưới đây là một ví dụ về cách bạn có thể sử dụng th:each để hiển thị danh sách người dùng:

<table>
  <tr>
    <th>Name</th>
    <th>Email</th>
  </tr>
  <tr th:each="user : ${users}">
    <td th:text="${user.name}"></td>
    <td th:text="${user.email}"></td>
  </tr>
</table>

Ở đây, chúng ta tạo một bảng để hiển thị danh sách người dùng với các cột "Name" và "Email".

Sử Dụng Vòng Lặp th:each Với Điều Kiện

Ngoài việc lặp qua danh sách, bạn cũng có thể kết hợp th:each với câu lệnh điều kiện th:if để hiển thị dữ liệu dựa trên điều kiện cụ thể. Ví dụ:

<ul>
  <li th:each="product : ${products}" th:if="${product.inStock}">
    <span th:text="${product.name}"></span>:
    <span th:text="${product.price}"></span> USD
  </li>
</ul>

Trong ví dụ này, chúng ta chỉ hiển thị các sản phẩm có sẵn trong kho (có thuộc tính inStock là true).