AngularJS Tables: Hiển thị và quản lý dữ liệu bảng

Tables trong AngularJS là một cách hiệu quả để hiển thị và quản lý dữ liệu dạng bảng. AngularJS cung cấp các directive và filter để giúp bạn tạo ra các bảng tương tác và dễ sử dụng.

Sử dụng ng-repeat để lặp qua dữ liệu

Directive ng-repeat được sử dụng để lặp qua một mảng dữ liệu và tạo ra một phần tử HTML cho mỗi phần tử trong mảng.

HTML

<table ng-app="myApp" ng-controller="MyController">
  <thead>
    <tr>
      <th>Tên</th>
      <th>Tuổi</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="person in people">
      <td>{{ person.name }}</td>
      <td>{{ person.age }}</td>
    </tr>
  </tbody>
</table>

Sử dụng orderBy để sắp xếp dữ liệu

Filter orderBy được sử dụng để sắp xếp một mảng dữ liệu theo một hoặc nhiều thuộc tính.

HTML

<table ng-app="myApp" ng-controller="MyController">
  <thead>
    <tr>
      <th>Tên</th>
      <th>Tuổi</th>
      <th><a href="" ng-click="predicate = 'name'; reversed = !reversed">Tên</a></th>
      <th><a href="" ng-click="predicate = 'age'; reversed = !reversed">Tuổi</a></th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="person in people | orderBy:predicate:reversed">
      <td>{{ person.name }}</td>
      <td>{{ person.age }}</td>
    </tr>
  </tbody>
</table>

Sử dụng limitTo để giới hạn số lượng hàng

Filter limitTo được sử dụng để lấy một số phần tử đầu hoặc cuối của một mảng.

HTML

<table ng-app="myApp" ng-controller="MyController">
  <thead>
    <tr>
      <th>Tên</th>
      <th>Tuổi</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="person in people | limitTo:5">
      <td>{{ person.name }}</td>
      <td>{{ person.age }}</td>
    </tr>
  </tbody>
</table>

Sử dụng ng-click để xử lý sự kiện

Directive ng-click được sử dụng để xử lý sự kiện click trên một phần tử HTML.

HTML

<table ng-app="myApp" ng-controller="MyController">
  <thead>
    <tr>
      <th>Tên</th>
      <th>Tuổi</th>
      <th>Xóa</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="person in people">
      <td>{{ person.name }}</td>
      <td>{{ person.age }}</td>
      <td><button ng-click="deletePerson(person)">Xóa</button></td>
    </tr>
  </tbody>
</table>

Các tính năng của Tables trong AngularJS

• Hiển thị dữ liệu dạng bảng: Hiển thị dữ liệu trong một bảng có cấu trúc.
• Sắp xếp dữ liệu: Sắp xếp dữ liệu theo một hoặc nhiều thuộc tính.
• Giới hạn số lượng hàng: Hiển thị một số lượng hàng nhất định.
• Xử lý sự kiện: Xử lý các sự kiện của người dùng trên các phần tử trong bảng.

Các ứng dụng của Tables trong AngularJS

• Hiển thị danh sách dữ liệu.
• Tạo các bảng quản lý dữ liệu.
• Tạo các bảng tương tác với người dùng.