📌 Sử Dụng AngularJS Table – Hướng Dẫn Chi Tiết

Trong các ứng dụng web, bảng dữ liệu (table) là một thành phần quan trọng giúp hiển thị và quản lý thông tin một cách trực quan. Với AngularJS, việc tạo bảng trở nên linh hoạt hơn nhờ vào data binding (liên kết dữ liệu), lọc, sắp xếp, phân trang và tích hợp API.

Bài viết này sẽ hướng dẫn bạn cách tạo bảng động trong AngularJS, sử dụng các tính năng quan trọng như:
✅ Hiển thị dữ liệu từ API hoặc JSON.
✅ Lọc, tìm kiếm dữ liệu theo thời gian thực.
✅ Sắp xếp dữ liệu theo cột.
✅ Phân trang để hiển thị dữ liệu dễ đọc hơn.
✅ Tích hợp Bootstrap hoặc Material Design để tối ưu giao diện.
✅ Thêm chức năng chỉnh sửa, xóa và chọn nhiều dòng trong bảng.

💡 Nếu bạn đang xây dựng một ứng dụng AngularJS và cần một bảng dữ liệu chuyên nghiệp, đây là bài hướng dẫn chi tiết dành cho bạn! 🚀

AngularJS Table là gì?

AngularJS Table là một giải pháp linh hoạt giúp hiển thị dữ liệu động trong ứng dụng web một cách trực quan và dễ quản lý. Với sự hỗ trợ của ng-repeat, filter, orderBy, AngularJS giúp tạo bảng dữ liệu có khả năng sắp xếp, lọc, phân trang và tương tác với API bên ngoài.

Tại sao nên sử dụng AngularJS Table?

✅ Dễ dàng hiển thị dữ liệu từ API hoặc JSON
✅ Tự động cập nhật dữ liệu khi Model thay đổi
✅ Hỗ trợ sắp xếp, tìm kiếm, phân trang giúp tối ưu trải nghiệm người dùng
✅ Tích hợp Bootstrap hoặc Material Design để làm đẹp bảng dữ liệu

Cách Tạo Bảng Cơ Bản Trong AngularJS

Tạo bảng HTML cơ bản với AngularJS

<div ng-app="productApp" ng-controller="productController">
    <table class="table table-bordered">
        <thead>
            <tr>
                <th>ID</th>
                <th>Sản phẩm</th>
                <th>Giá</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="product in products">
                <td>{{ product.id }}</td>
                <td>{{ product.name }}</td>
                <td>{{ product.price | currency }}</td>
            </tr>
        </tbody>
    </table>
</div>

📌 Giải thích:

• ng-app="productApp": Khởi tạo ứng dụng AngularJS
• ng-controller="productController": Gán Controller để quản lý dữ liệu
• ng-repeat="product in products": Duyệt qua danh sách sản phẩm và hiển thị lên bảng
• {{ product.price | currency }}: Định dạng giá tiền

Khai báo dữ liệu trong Controller

var app = angular.module("productApp", []);
app.controller("productController", function ($scope) {
    $scope.products = [
        { id: 101, name: "Laptop Dell", price: 22000000 },
        { id: 102, name: "iPhone 13", price: 18000000 },
        { id: 103, name: "Samsung Galaxy S22", price: 16000000 }
    ];
});

📌 Bảng dữ liệu sẽ tự động cập nhật khi có thay đổi từ Controller!

Các Chức Năng Quan Trọng Trong AngularJS Table

Lọc dữ liệu trong bảng bằng filter

Để tìm kiếm sản phẩm theo tên, sử dụng ng-model kết hợp với filter:

<input type="text" ng-model="searchText" placeholder="Tìm kiếm sản phẩm..." />

<table class="table table-striped">
    <tr ng-repeat="product in products | filter:searchText">
        <td>{{ product.id }}</td>
        <td>{{ product.name }}</td>
        <td>{{ product.price | currency }}</td>
    </tr>
</table>

📌 Nhập từ khóa vào ô tìm kiếm để lọc dữ liệu theo thời gian thực!

Sắp xếp dữ liệu bằng orderBy

Thêm chức năng sắp xếp bảng dữ liệu bằng cách sử dụng orderBy:

<button ng-click="sortType = 'price'; sortReverse = !sortReverse">
    Sắp xếp theo giá
</button>

<table class="table">
    <tr ng-repeat="product in products | orderBy:sortType:sortReverse">
        <td>{{ product.id }}</td>
        <td>{{ product.name }}</td>
        <td>{{ product.price | currency }}</td>
    </tr>
</table>

📌 Nhấn vào nút “Sắp xếp theo giá” để đảo ngược thứ tự hiển thị.

Phân trang dữ liệu bằng AngularJS Pagination

Khi dữ liệu quá nhiều, chúng ta cần chia nhỏ bảng thành nhiều trang:

<button ng-disabled="currentPage == 1" ng-click="currentPage = currentPage - 1">
    Trang trước
</button>
<button ng-disabled="currentPage >= totalPages()" ng-click="currentPage = currentPage + 1">
    Trang sau
</button>

<table class="table">
    <tr ng-repeat="product in products.slice((currentPage-1)*itemsPerPage, currentPage*itemsPerPage)">
        <td>{{ product.id }}</td>
        <td>{{ product.name }}</td>
        <td>{{ product.price | currency }}</td>
    </tr>
</table>

$scope.itemsPerPage = 2;
$scope.currentPage = 1;
$scope.totalPages = function () {
    return Math.ceil($scope.products.length / $scope.itemsPerPage);
};

📌 Tạo nút phân trang giúp hiển thị dữ liệu rõ ràng hơn!

Tích Hợp API Và Hiển Thị Dữ Liệu Động Trong Bảng

Gọi API để lấy danh sách sản phẩm

app.controller("productController", function ($scope, $http) {
    $http.get("https://fakestoreapi.com/products")
        .then(function (response) {
            $scope.products = response.data;
        });
});

📌 Dữ liệu từ API sẽ được hiển thị ngay trong bảng mà không cần refresh trang!

Tạo Bảng Tương Tác Với Nút Chỉnh Sửa, Xóa

Chọn nhiều dòng bằng checkbox

<tr ng-repeat="product in products">
    <td><input type="checkbox" ng-model="product.selected" /></td>
    <td>{{ product.name }}</td>
</tr>
<button ng-click="deleteSelected()">Xóa sản phẩm đã chọn</button>

$scope.deleteSelected = function () {
    $scope.products = $scope.products.filter(product => !product.selected);
};

📌 Chọn nhiều sản phẩm và xóa bằng nút “Xóa sản phẩm đã chọn”.

Chỉnh sửa dữ liệu ngay trong bảng

<tr ng-repeat="product in products">
    <td>{{ product.id }}</td>
    <td><input type="text" ng-model="product.name" /></td>
    <td><input type="number" ng-model="product.price" /></td>
</tr>

📌 Cho phép chỉnh sửa dữ liệu sản phẩm ngay trên bảng!

Kết Luận

🎯 AngularJS Table giúp hiển thị dữ liệu linh hoạt với nhiều tính năng mạnh mẽ như lọc, sắp xếp, phân trang, chỉnh sửa và xóa dữ liệu.

✔ Tích hợp API giúp hiển thị dữ liệu từ server dễ dàng.
✔ Tối ưu UX/UI với Bootstrap, Material Design.
✔ Sử dụng ng-repeat, filter, orderBy giúp bảng trở nên linh hoạt và dễ dùng.

💡 Nếu bạn đang phát triển một ứng dụng AngularJS, hãy thử ngay với AngularJS Table để quản lý dữ liệu hiệu quả hơn! 🚀