AngularJS - Bảng: Hướng dẫn cho người mới bắt đầu

Xin chào bạn, ngôi sao lập trình tương lai! Tôi rất vui mừng được làm hướng dẫn viên của bạn trong hành trình thú vị vào thế giới của các bảng AngularJS. Là người đã dạy lập trình trong nhiều năm, tôi có thể đảm bảo với bạn rằng bảng không chỉ còn cho các bảng tính nữa - chúng là một phần quan trọng của phát triển web. Vậy hãy cùng nhau lặn sâu và tạo ra phép màu với bảng!

AngularJS - Tables

Các bảng AngularJS là gì?

Trước khi chúng ta bắt đầu tạo các bảng 左右, hãy hiểu về các bảng AngularJS. Về cơ bản, các bảng AngularJS là các cấu trúc động, dữ liệu驱动的 cho phép chúng ta hiển thị và manipulates thông tin một cách ngăn nắp, tổ chức. Hãy nghĩ về chúng như những tờ Excel siêu mạnh mẽ sống trên trang web của bạn!

Tại sao sử dụng các bảng AngularJS?

Bạn có thể tự hỏi, "Tại sao phiền toái với các bảng AngularJS khi HTML tables tồn tại?" Well, người bạn tò mò của tôi, các bảng AngularJS mang lại một số lợi ích tuyệt vời:

Dynamic data binding
Đơn giản để sắp xếp và lọc
Phân trang
Thiết kế响应式

Bây giờ chúng ta đã làm bạn quan tâm, hãy c rolled up our sleeves và bắt đầu mã hóa!

Tạo bảng AngularJS đầu tiên của bạn

Bước 1: Thiết lập HTML của bạn

Đầu tiên, chúng ta cần tạo một cấu trúc HTML cơ bản. Đừng lo lắng; nó đơn giản hơn việc ráp đồ nội thất IKEA!

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>My First AngularJS Table</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="myCtrl">
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr ng-repeat="person in people">
<td>{{person.name}}</td>
<td>{{person.age}}</td>
</tr>
</table>
<script src="app.js"></script>
</body>
</html>

HTML này thiết lập cấu trúc bảng cơ bản. Phép thuật xảy ra với ng-repeat="person in people". Chỉ thị này nói với AngularJS để lặp <tr> cho mỗi mục trong mảng people.

Bước 2: Tạo ứng dụng AngularJS của bạn

Bây giờ, hãy thổi sinh khí vào bảng của chúng ta với một chút phép thuật AngularJS. Tạo một tệp có tên app.js và thêm mã sau:

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {
$scope.people = [
{name: 'Alice', age: 25},
{name: 'Bob', age: 30},
{name: 'Charlie', age: 35}
];
});

Mã này tạo một module AngularJS và một controller. Controller xác định một mảng người, mỗi người có tên và tuổi. Dữ liệu này sẽ điền vào bảng của chúng ta.

Cải thiện bảng của bạn

Thêm chức năng sắp xếp

Hãy làm cho bảng của chúng ta tương tác hơn bằng cách thêm chức năng sắp xếp. Cập nhật HTML của bạn như sau:

<table>
<tr>
<th ng-click="sortBy('name')">Name</th>
<th ng-click="sortBy('age')">Age</th>
</tr>
<tr ng-repeat="person in people | orderBy:sortColumn:reverseSort">
<td>{{person.name}}</td>
<td>{{person.age}}</td>
</tr>
</table>

Bây giờ, cập nhật app.js của bạn:

app.controller('myCtrl', function($scope) {
$scope.people = [
{name: 'Alice', age: 25},
{name: 'Bob', age: 30},
{name: 'Charlie', age: 35}
];

$scope.sortColumn = 'name';
$scope.reverseSort = false;

$scope.sortBy = function(columnName) {
if ($scope.sortColumn == columnName) {
$scope.reverseSort = !$scope.reverseSort;
} else {
$scope.sortColumn = columnName;
$scope.reverseSort = false;
}
};
});

Mã này thêm chức năng sắp xếp vào bảng của bạn. Nhấp vào các tiêu đề cột sẽ sắp xếp bảng theo cột đó.

Thêm chức năng tìm kiếm

Hãy thêm một hộp tìm kiếm để lọc bảng của chúng ta. Thêm này vào HTML của bạn, ngay trên bảng:

<input type="text" ng-model="searchText" placeholder="Search...">

Sau đó, cập nhật chỉ thị ng-repeat của bảng:

<tr ng-repeat="person in people | filter:searchText | orderBy:sortColumn:reverseSort">

Điều này cho phép người dùng tìm kiếm qua dữ liệu bảng theo từng thời điểm. Rất tuyệt vời, phải không?

Sức mạnh của các bảng AngularJS

Bây giờ chúng ta đã tạo một bảng cơ bản với chức năng sắp xếp và tìm kiếm, hãy dừng lại một chút để ngắm nhìn những gì chúng ta đã đạt được. Chỉ với một vài dòng mã, chúng ta đã tạo ra một bảng động, tương tác mà sẽ mất nhiều công sức hơn để thực hiện bằng HTML và JavaScript thuần túy.

Dưới đây là tóm tắt các phương thức bảng AngularJS chúng ta đã sử dụng:

Phương thức	Mô tả
ng-repeat	Lặp lại một khối HTML cho mỗi mục trong một mảng
orderBy	Sắp xếp một mảng theo một khóa cụ thể
filter	Lọc một mảng dựa trên tiêu chí tìm kiếm

Kết luận

Chúc mừng! Bạn vừa迈出了第一步 vào thế giới của các bảng AngularJS. Chúng ta đã bao gồm các khái niệm cơ bản của việc tạo bảng, thêm dữ liệu, triển khai sắp xếp và thậm chí thêm chức năng tìm kiếm. Nhưng đây chỉ là phần nổi của tảng băng!

Nhớ rằng, việc thành thạo các bảng AngularJS giống như việc học nấu ăn - nó đòi hỏi sự thực hành, thí nghiệm và có thể có một vài dishes bị cháy trong quá trình. Nhưng với sự kiên trì, bạn sẽ nhanh chóng tạo ra các ứng dụng web dữ liệu phức tạp.

Vậy bạn còn chờ gì nữa? Bắt đầu thí nghiệm với kỹ năng bảng AngularJS mới của bạn. Ai biết? Ứng dụng web dữ liệu lớn tiếp theo có thể chỉ cách bạn một vài bảng!

Chúc bạn mã hóa vui vẻ, và mong rằng bảng của bạn luôn được sắp xếp hoàn hảo!

Credits: Image by storyset