Bảng AngularJS: Sắp xếp, Thứ tựBy & Bộ lọc chữ hoa (Ví dụ)

Bảng là một trong những yếu tố phổ biến được sử dụng trong HTML khi làm việc với các trang web.

Các bảng trong HTML được thiết kế bằng thẻ HTML

Thẻ - Đây là thẻ chính được sử dụng để hiển thị bảng.

- Thẻ này được sử dụng để phân tách các hàng trong bảng.

- Thẻ này được sử dụng để hiển thị dữ liệu bảng thực tế.

- Điều này được sử dụng cho dữ liệu tiêu đề bảng.

Sử dụng các thẻ HTML có sẵn ở trên cùng với AngularJS, chúng tôi có thể giúp điền dữ liệu bảng dễ dàng hơn. Nói tóm lại, lệnh ng-repeat được sử dụng để điền dữ liệu vào bảng.

Chúng ta sẽ xem xét làm thế nào để đạt được điều này trong chương này. Chúng ta cũng sẽ xem xét cách chúng ta có thể sử dụng các bộ lọc theo thứ tự và chữ hoa cùng với việc sử dụng thuộc tính $ index để hiển thị các chỉ mục của bảng Angular.

Trong hướng dẫn này, bạn sẽ học-

Điền & Hiển thị Dữ liệu trong Bảng
Bộ lọc tích hợp AngularJS
Sắp xếp Bảng với Bộ lọc OrderBy
Bảng hiển thị với bộ lọc chữ hoa
Hiển thị Chỉ mục Bảng ($ index)

Điền & Hiển thị Dữ liệu trong Bảng

Như chúng ta đã thảo luận trong phần giới thiệu chương này, cơ sở để tạo cấu trúc bảng trong trang HTML vẫn giống nhau.

Cấu trúc của bảng vẫn được tạo bằng cách sử dụng các thẻ HTML bình thường là

, ,

và

. Tuy nhiên, dữ liệu được điền bằng cách sử dụng lệnh ng-repeat trong AngularJS.

Hãy xem một ví dụ đơn giản về cách chúng ta có thể triển khai các bảng Angular.

Trong ví dụ này,

Chúng tôi sẽ tạo một bảng Angular sẽ có các chủ đề khóa học cùng với mô tả của chúng.

Bước 1) Đầu tiên chúng ta sẽ thêm thẻ "style" vào trang HTML của mình để bảng có thể được hiển thị như một bảng thích hợp.

Thẻ kiểu được thêm vào trang HTML. Đây là cách tiêu chuẩn để thêm bất kỳ thuộc tính định dạng nào cần thiết cho các phần tử HTML.
Chúng tôi đang thêm hai giá trị kiểu vào bảng của mình.

Một là phải có một đường viền chắc chắn cho bảng Angular của chúng tôi và
Thứ hai là cần có đệm cho dữ liệu bảng Angular của chúng ta.

Bước 2) Bước tiếp theo là viết mã để tạo bảng và đó là dữ liệu.

Event Registration
Guru99 Global Event


{{ptutor.Name}} {{ptutor.Description}}

Giải thích mã:

Đầu tiên chúng tôi tạo một biến có tên là "hướng dẫn" và gán cho nó một số cặp khóa-giá trị trong một bước. Mỗi cặp khóa-giá trị sẽ được sử dụng làm dữ liệu khi hiển thị bảng. Biến hướng dẫn sau đó được gán cho đối tượng phạm vi để nó có thể được truy cập từ chế độ xem của chúng ta.

Đây là bước đầu tiên trong việc tạo một bảng và chúng tôi sử dụng thẻ .

Đối với mỗi hàng dữ liệu, chúng tôi đang sử dụng "chỉ thị ng-repeat". Lệnh này đi qua từng cặp khóa-giá trị trong đối tượng phạm vi hướng dẫn, rial bằng cách sử dụng biến ptutor.

Cuối cùng, chúng tôi đang sử dụng thẻ

cùng với các cặp khóa-giá trị (ptutor.Name và ptutor.Description) để hiển thị dữ liệu bảng Angular.

Nếu mã được thực thi thành công, Đầu ra sau đây sẽ được hiển thị khi bạn chạy mã của mình trong trình duyệt.

Đầu ra:

Từ kết quả trên,

Chúng ta có thể thấy rằng bảng được hiển thị đúng với dữ liệu từ mảng các cặp khóa-giá trị được xác định trong bộ điều khiển.
Dữ liệu bảng được tạo bằng cách đi qua từng cặp khóa-giá trị bằng cách sử dụng "chỉ thị ng-repeat".

Bộ lọc tích hợp AngularJS

Rất phổ biến khi sử dụng các bộ lọc có sẵn trong AngularJS để thay đổi cách dữ liệu được hiển thị trong các bảng. Chúng ta đã thấy các bộ lọc hoạt động trong chương trước. Hãy tóm tắt nhanh các bộ lọc trước khi chúng ta tiếp tục.

Trong Angular.JS các bộ lọc được sử dụng để định dạng giá trị của biểu thức trước khi nó được hiển thị cho người dùng. Ví dụ về bộ lọc là bộ lọc 'chữ hoa' nhận đầu ra chuỗi và định dạng chuỗi và hiển thị tất cả các ký tự trong chuỗi dưới dạng chữ hoa.

Vì vậy, trong ví dụ dưới đây, nếu giá trị của biến 'TutorialName' là 'AngularJS', đầu ra của biểu thức dưới đây sẽ là 'ANGULARJS'.

Trong phần này, chúng ta sẽ xem xét cách sử dụng bộ lọc orderBy và chữ hoa trong bảng một cách chi tiết hơn.

Sắp xếp Bảng với Bộ lọc OrderBy

Bộ lọc này được sử dụng để sắp xếp bảng dựa trên một trong các cột của bảng. Trong ví dụ trước, đầu ra cho dữ liệu bảng Angular của chúng tôi xuất hiện như hình dưới đây.

Bộ điều khiển	Bộ điều khiển đang hoạt động
Mô hình	Mô hình và dữ liệu ràng buộc
Chỉ thị	Tính linh hoạt của Chỉ thị

Hãy xem một ví dụ, về cách chúng ta có thể sử dụng bộ lọc "orderBy" và sắp xếp dữ liệu bảng Angular bằng cách sử dụng cột đầu tiên trong bảng.

Event Registration
Guru99 Global Event


{{ptutor.Name}} {{ptutor.Description}}

Giải thích mã:

Chúng tôi đang sử dụng mã giống như chúng tôi đã làm để tạo bảng của mình, sự khác biệt duy nhất lần này là chúng tôi đang sử dụng bộ lọc "orderBy" cùng với chỉ thị ng-repeat. Trong trường hợp này, chúng tôi đang nói rằng chúng tôi muốn sắp xếp bảng bằng phím "Tên".

Nếu mã được thực thi thành công, Đầu ra sau đây sẽ được hiển thị khi bạn chạy mã của mình trong trình duyệt.

Đầu ra:

Từ đầu ra,

Chúng ta có thể thấy rằng dữ liệu trong bảng Angular đã được sắp xếp theo dữ liệu trong cột đầu tiên. Trong tập dữ liệu của chúng tôi, dữ liệu "Chỉ thị" đến từ dữ liệu "Mô hình", nhưng vì chúng tôi đã áp dụng bộ lọc OrderBy, các bảng được sắp xếp tương ứng.

Bảng hiển thị với bộ lọc chữ hoa

Chúng ta cũng có thể sử dụng bộ lọc chữ hoa để thay đổi dữ liệu trong bảng Angular thành chữ hoa.

Hãy xem một ví dụ về cách chúng ta có thể đạt được điều này.

Event Registration
Guru99 Global Event


{{ptutor.Name | uppercase}} {{ptutor.Description}}

Giải thích mã:

Chúng tôi đang sử dụng mã giống như chúng tôi đã làm để tạo bảng của mình, sự khác biệt duy nhất lần này là chúng tôi đang sử dụng bộ lọc chữ hoa. Chúng tôi đang sử dụng bộ lọc này cùng với "ptutor.Name" để tất cả văn bản trong cột đầu tiên sẽ được hiển thị bằng chữ hoa.

Nếu mã được thực thi thành công, Đầu ra sau đây sẽ được hiển thị khi bạn chạy mã của mình trong trình duyệt.

Đầu ra:

Từ đầu ra,

Chúng ta có thể thấy rằng bằng cách sử dụng bộ lọc "chữ hoa", tất cả dữ liệu trong cột đầu tiên được hiển thị bằng các ký tự chữ hoa.

Hiển thị Chỉ mục Bảng ($ index)

Để hiển thị chỉ mục bảng, hãy thêm một

với $ index.

Hãy xem một ví dụ về cách chúng ta có thể đạt được điều này.

Event Registration
Guru99 Global Event


{{$index + 1}} {{ptutor.Name}} {{ptutor.Description}}

Giải thích mã:

Chúng tôi đang sử dụng mã giống như chúng tôi đã làm để tạo bảng của mình, sự khác biệt duy nhất lần này là chúng tôi đang thêm một hàng bổ sung vào bảng của mình để hiển thị cột chỉ mục.
Trong cột bổ sung này, chúng tôi đang sử dụng thuộc tính "$ index" do AngularJS cung cấp và sau đó sử dụng toán tử +1 để tăng chỉ số cho mỗi hàng.

Nếu mã được thực thi thành công, Đầu ra sau đây sẽ được hiển thị khi bạn chạy mã của mình trong trình duyệt.

Đầu ra:

Từ đầu ra,

Bạn có thể thấy rằng một cột bổ sung đã được tạo. Trong cột này, chúng ta có thể thấy các chỉ mục được tạo cho mỗi hàng.

Tóm lược:

Cấu trúc bảng được tạo bằng cách sử dụng các thẻ tiêu chuẩn có sẵn trong HTML. Dữ liệu trong bảng được điền bằng lệnh "ng-repeat".
Bộ lọc orderBy có thể được sử dụng để sắp xếp bảng dựa trên bất kỳ cột nào trong bảng.
Bộ lọc chữ hoa có thể được sử dụng để hiển thị dữ liệu trong bất kỳ cột dựa trên văn bản nào bằng chữ hoa.
Thuộc tính "$ index" có thể được sử dụng để tạo chỉ mục cho bảng.
Một vấn đề phổ biến gặp phải trong quá trình phát triển với bảng AngularJS.JS là việc triển khai các tập dữ liệu lớn có hơn 1000 hàng dữ liệu. Đôi khi lệnh ng-repeat có thể trở nên không phản hồi và do đó toàn bộ trang đôi khi không phản hồi. Trong trường hợp như vậy, tốt hơn hết là bạn nên phân trang trong đó các hàng dữ liệu được trải rộng trên nhiều trang.