Bộ lọc (filter) trong Angular

Ngày cập nhật: 14/06/2017 | Số lần đọc: 8649 | Phân loại: AngularJS
Tìm kiếm

Sự trung thực có thể không mang lại cho bạn nhiều người bạn, nhưng nó luôn giúp bạn tìm được những người bạn đúng đắn.

Bộ lọc là một công cụ mạnh mẽ trong AngularJS giúp định dạng giá trị của một biểu thức trước khi hiển thị cho người dùng. Chúng có thể được sử dụng trong các template giao diện, controller hoặc service và việc tạo ra một bộ lọc riêng cũng rất đơn giản.

Lưu ý:
Một điểm dễ gây nhầm lẫn là AngularJS đã cung cấp sẵn một bộ lọc với tên gọi chính là filter. Tên này đôi khi khiến người mới học hiểu sai mục đích sử dụng của nó.

Các bộ lọc được tích hợp sẵn trong AngularJS

AngularJS cung cấp một số bộ lọc phổ biến như sau:

• filter: Dùng để lọc dữ liệu dựa trên điều kiện.
• currency: Định dạng giá trị thành tiền tệ.
• number: Định dạng số theo quy cách nhất định.
• date: Định dạng ngày tháng.
• json: Chuyển đổi đối tượng JavaScript thành chuỗi JSON.
• lowercase: Chuyển toàn bộ chuỗi sang chữ thường.
• uppercase: Chuyển toàn bộ chuỗi sang chữ in hoa.
• limitTo: Giới hạn độ dài chuỗi hoặc phần tử mảng.
• orderBy: Sắp xếp danh sách theo thứ tự mong muốn.

Mục đích sử dụng filter

• Định dạng đầu ra: Ví dụ như currency, date, uppercase giúp trình bày dữ liệu theo đúng chuẩn.
• Lọc dữ liệu phía trước: Bộ lọc filter tích hợp sẵn giúp người dùng tìm kiếm nhanh chóng trên giao diện.

Cú pháp sử dụng filter

Trong template giao diện

Bạn có thể kết hợp nhiều filter liên tiếp với nhau như sau:

• expression | filter1 | filter2 | ...
• expression | filter:argument1:argument2:...

Ví dụ:

1

{{ "angular" | uppercase }}

Trong controller và service

Khi sử dụng trong controller hoặc service, bạn cần inject tên filter tương ứng, kèm theo hậu tố Filter. Ví dụ như filterFilter, dateFilter, v.v.

Sau đó bạn có thể sử dụng chúng trực tiếp trong code như sau:

1

uppercaseFilter("zhongwei");

Cách tạo filter tùy chỉnh

Bạn hoàn toàn có thể phát triển filter riêng cho ứng dụng của mình. Dưới đây là ví dụ cơ bản:

1
2
3
4
5

myModule.filter("appendSomething", function() {
  return function(input) {
    return input + "something";
  };
});

Khi sử dụng trong template, bạn chỉ cần gọi tên filter như sau:

1
2

{{ "hello" | appendSomething }}
<!-- Kết quả sẽ là "hellosomething" -->

Khi nào KHÔNG nên sử dụng filter

Trong quá trình phát triển, đôi khi việc lạm dụng filter có thể dẫn đến lỗi nghiêm trọng. Ví dụ:

1

array | filter:searchText | showSearched:searchText

Trong đoạn code trên, filter showSearched có chức năng thiết lập thuộc tính show của từng item tìm thấy thành true và trả về một mảng mới. Tuy nhiên, điều này có thể gây ra lỗi:

1

Error: 10 $digest() iterations reached. Aborting!

Nguyên nhân là do AngularJS đang bị kẹt trong vòng lặp digest vô tận, xảy ra khi mỗi lần filter thay đổi dữ liệu, hệ thống lại bắt đầu một vòng digest mới.

_Tài liệu

Hy vọng bài viết này giúp bạn hiểu rõ hơn về cách sử dụng và giới hạn của filter trong AngularJS. Nếu bạn có bất kỳ câu hỏi hay góp ý nào, đừng ngại chia sẻ!