Đôi khi các bộ lọc tích hợp trong Angular không thể đáp ứng nhu cầu hoặc yêu cầu cho đầu ra lọc. Trong trường hợp như vậy, một bộ lọc tùy chỉnh có thể được tạo ra có thể chuyển đầu ra theo cách cần thiết.
Cách tạo bộ lọc tùy chỉnh
Trong ví dụ dưới đây, chúng tôi sẽ truyền một chuỗi đến khung nhìn từ bộ điều khiển thông qua đối tượng phạm vi, nhưng chúng tôi không muốn chuỗi được hiển thị như nó vốn có.
Chúng tôi muốn đảm bảo rằng bất cứ khi nào chúng tôi hiển thị chuỗi, chúng tôi chuyển một bộ lọc tùy chỉnh sẽ nối một chuỗi khác và hiển thị chuỗi đã hoàn thành cho người dùng.
Event Registration Guru99 Global Event
This tutorial is {{tutorial | Demofilter}}
Giải thích mã:
- Ở đây chúng ta đang chuyển một chuỗi "Angular" trong một biến thành viên được gọi là hướng dẫn và gắn nó vào đối tượng phạm vi.
- Angular cung cấp dịch vụ bộ lọc có thể được sử dụng để tạo bộ lọc tùy chỉnh của chúng tôi. 'Demofilter' là tên được đặt cho bộ lọc của chúng tôi.
- Đây là cách tiêu chuẩn trong đó bộ lọc tùy chỉnh được xác định trong đó một hàm được trả về. Hàm này là hàm chứa mã tùy chỉnh để tạo bộ lọc tùy chỉnh. Trong hàm của chúng tôi, chúng tôi đang lấy một chuỗi "Angular" được chuyển từ chế độ xem của chúng tôi đến bộ lọc và nối chuỗi "Hướng dẫn" vào chuỗi này.
- Chúng tôi đang sử dụng Demofilter của chúng tôi trên biến thành viên của chúng tôi đã được chuyển từ bộ điều khiển sang chế độ xem.
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 bộ lọc tùy chỉnh của chúng tôi đã được áp dụng và
- Từ 'Hướng dẫn' đã được thêm vào cuối chuỗi, đã được chuyển trong hướng dẫn biến thành viên.
Tóm lược:
Nếu có một yêu cầu nào đó không được đáp ứng bởi bất kỳ bộ lọc nào được xác định trong góc, thì bạn có thể tạo bộ lọc tùy chỉnh và thêm mã tùy chỉnh để xác định loại đầu ra bạn muốn từ bộ lọc. A