Filter trong AngularJS là gì?
Một Lọc trong AngularJS giúp để định dạng giá trị của một biểu thức để hiển thị cho người sử dụng mà không thay đổi định dạng ban đầu. Ví dụ: nếu bạn muốn chuỗi của mình ở dạng chữ thường hoặc chữ hoa, bạn có thể làm điều đó bằng cách sử dụng bộ lọc. Có các bộ lọc tích hợp như 'chữ thường', 'chữ hoa', có thể truy xuất đầu ra chữ thường và chữ hoa tương ứng.
Tương tự, đối với các số, bạn có thể sử dụng các bộ lọc khác.
Trong hướng dẫn này, chúng ta sẽ thấy các bộ lọc tích hợp tiêu chuẩn khác nhau có sẵn trong Angular.
Trong hướng dẫn này, bạn sẽ học-
- Bộ lọc chữ thường trong AngularJS
- Bộ lọc chữ hoa trong AngularJS
- Bộ lọc số trong AngularJS
- Bộ lọc tiền tệ trong AngularJS
- Bộ lọc JSON trong AngularJS
Bộ lọc chữ thường trong AngularJS
Bộ lọc này 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ữ thường.
Hãy xem một ví dụ về bộ lọc AngularJS với tùy chọn AngularJS tolowercase.
Trong ví dụ dưới đây, chúng tôi sẽ sử dụng một bộ điều khiển để gửi một chuỗi đến một khung nhìn thông qua đối tượng phạm vi. Sau đó, chúng tôi sẽ sử dụng một bộ lọc trong chế độ xem để chuyển đổi chuỗi thành chữ thường.
Event Registration Guru99 Global Event
Tutorial Name :
This tutorial is {{tutorialName | lowercase}}
Giải thích mã:
- Ở đây chúng ta đang truyền một chuỗi, là sự kết hợp của các ký tự viết thường và viết hoa trong một biến thành viên được gọi là "tutorialName" và gắn nó vào đối tượng phạm vi. Giá trị của chuỗi được truyền là "AngularJS".
- Chúng tôi đang sử dụng biến thành viên "tutorialName" và đặt một biểu tượng bộ lọc (|) có nghĩa là đầu ra cần được sửa đổi bằng cách sử dụng bộ lọc. Sau đó, chúng tôi sử dụng từ khóa chữ thường để sử dụng bộ lọc tích hợp để xuất toàn bộ chuỗi ở dạng chữ thườ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
- Có thể thấy rằng chuỗi "AngularJS" được truyền trong biến tutorialName là sự kết hợp của các ký tự viết thường và viết hoa đã được thực thi.
- Sau khi thực hiện, kết quả cuối cùng là chữ thường như hình trên.
Bộ lọc chữ hoa trong AngularJS
Bộ lọc này tương tự như bộ lọc chữ thường; sự khác biệt là 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.
Hãy xem một ví dụ về viết hoa bộ lọc AngularJS với tùy chọn chữ thường.
Trong ví dụ viết hoa AngularJS dưới đây, chúng tôi sẽ sử dụng một bộ điều khiển để gửi một chuỗi đến một khung nhìn thông qua đối tượng phạm vi. Sau đó, chúng tôi sẽ sử dụng một bộ lọc trong chế độ xem để chuyển chuỗi thành chữ hoa.
Event Registration Guru99 Global Event
Tutorial Name :
This tutorial is {{tutorialName | uppercase}}
Giải thích mã:
- Ở đây chúng ta đang chuyển một chuỗi là sự kết hợp của các ký tự viết thường và viết hoa "Angular JS" trong một biến thành viên được gọi là "tutorialName" và gắn nó vào đối tượng phạm vi.
- Chúng tôi đang sử dụng biến thành viên "tutorialName" và đặt một biểu tượng bộ lọc (|), có nghĩa là đầu ra cần được sửa đổi bằng cách sử dụng bộ lọc. Sau đó, chúng tôi sử dụng từ khóa viết hoa để nói rằng sử dụng bộ lọc tích hợp để xuất toàn bộ chuỗi 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,
- Có thể thấy rằng chuỗi được truyền trong biến tutorialName là sự kết hợp của các ký tự chữ thường và chữ hoa đã được xuất ra bằng tất cả các chữ hoa.
Bộ lọc số trong AngularJS
Bộ lọc này định dạng một số và có thể áp dụng giới hạn số thập phân cho một số.
Hãy xem một ví dụ về bộ lọc AngularJS với tùy chọn số.
Trong ví dụ dưới đây,
Chúng tôi muốn giới thiệu cách chúng tôi có thể sử dụng bộ lọc số để định dạng một số để hiển thị với giới hạn 2 chữ số thập phân.
Chúng tôi sẽ sử dụng một bộ điều khiển để gửi một số đến một chế độ xem thông qua đối tượng phạm vi. Sau đó, chúng tôi sẽ sử dụng một bộ lọc trong chế độ xem để áp dụng bộ lọc số.
Event Registration Guru99 Global Event
This tutorialID is {{tutorialID | number:2}}
Giải thích mã:
- Ở đây chúng ta đang chuyển một số có số lượng vị trí thập phân lớn hơn trong một biến thành viên được gọi là tutorialID và gắn nó vào đối tượng phạm vi.
- Chúng tôi đang sử dụng tutorialID biến thành viên và đặt một biểu tượng bộ lọc (|) cùng với bộ lọc số. Bây giờ ở số: 2, cả hai chỉ ra rằng bộ lọc nên hạn chế số vị trí thập phân ở 2.
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,
- Có thể thấy rằng số được truyền trong biến tutorialID có nhiều dấu thập phân đã bị giới hạn ở 2 chữ số thập phân vì áp dụng bộ lọc số: 2.
Bộ lọc tiền tệ trong AngularJS
Bộ lọc này định dạng bộ lọc tiền tệ thành một số.
Giả sử, nếu bạn muốn hiển thị một số có đơn vị tiền tệ như $, thì bộ lọc này có thể được sử dụng.
Trong ví dụ dưới đây, chúng tôi sẽ sử dụng một bộ điều khiển để gửi một số đến một khung nhìn thông qua đối tượng phạm vi. Sau đó, chúng tôi sẽ sử dụng một bộ lọc trong chế độ xem để áp dụng bộ lọc hiện tại.
Event Registration Guru99 Global Event
This tutorial Price is {{tutorialprice | currency}}
Giải thích mã:
- Ở đây chúng ta đang chuyển một số vào một biến thành viên có tên là tutorialprice và gắn nó vào đối tượng scope.
- Chúng tôi đang sử dụng giá hướng dẫn biến thành viên và đặt biểu tượng bộ lọc (|) cùng với bộ lọc tiền tệ. Lưu ý rằng đơn vị tiền tệ được áp dụng phụ thuộc vào cài đặt ngôn ngữ được áp dụng cho máy.
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
- Có thể thấy biểu tượng tiền tệ đã được thêm vào số đã được chuyển trong giá hướng dẫn biến.
- Trong trường hợp của chúng tôi, vì cài đặt ngôn ngữ là tiếng Anh (Hoa Kỳ), biểu tượng $ được chèn làm đơn vị tiền tệ.
Bộ lọc JSON trong AngularJS
Bộ lọc này định dạng đầu vào giống như JSON và áp dụng bộ lọc AngularJS JSON để cung cấp đầu ra trong JSON.
Trong ví dụ dưới đây, chúng ta sẽ sử dụng một bộ điều khiển để gửi một đối tượng kiểu JSON đến một chế độ xem thông qua đối tượng phạm vi. Sau đó, chúng tôi sẽ sử dụng một bộ lọc trong chế độ xem để áp dụng bộ lọc JSON.
Event Registration Guru99 Global Event
This tutorial is {{tutorial | json}}
Giải thích mã:
- Ở đây chúng ta đang chuyển một số vào một biến thành viên có tên là "hướng dẫn" và gắn nó vào đối tượng phạm vi. Biến thành viên này chứa một chuỗi kiểu JSON của Tutorial ID: 12 và TutorialName: "Angular".
- Chúng tôi đang sử dụng hướng dẫn về biến thành viên và đặt biểu tượng bộ lọc (|) cùng với bộ lọc JSON.
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,
- Có thể thấy rằng JSON giống như một chuỗi được phân tích cú pháp và hiển thị một đối tượng JSON thích hợp trong trình duyệt.
Tóm lược:
- Bộ lọc được sử dụng để thay đổi cách hiển thị đầu ra cho người dùng.
- Angular cung cấp các bộ lọc tích hợp như bộ lọc chữ thường và chữ hoa để thay đổi đầu ra của chuỗi thành chữ thường và chữ hoa tương ứng.
- Ngoài ra còn có một điều khoản để thay đổi cách số được hiển thị bằng cách sử dụng bộ lọc số bằng cách chỉ định số dấu thập phân sẽ được hiển thị trong số.
- Người ta cũng có thể sử dụng bộ lọc tiền tệ để nối biểu tượng tiền tệ vào bất kỳ số nào.
- Nếu có yêu cầu phải có đầu ra cụ thể json, thì angle cũng cung cấp bộ lọc JSON để lọc bất kỳ chuỗi JSON nào giống như chuỗi thành định dạng JSON.