Bộ lọc AngularJS & Bộ lọc tùy chỉnh AngularJS với ví dụ

Bởi: James Hartman James Hartman
Hours cập nhật

⚡ Tóm tắt thông minh

Trong AngularJS, Filter định dạng giá trị của một biểu thức để hiển thị mà không làm thay đổi dữ liệu gốc. Các bộ lọc tích hợp sẵn hỗ trợ định dạng chữ hoa/chữ thường, số, tiền tệ và JSON, trong khi bộ lọc tùy chỉnh xử lý bất kỳ quy tắc định dạng nào mà framework chưa cung cấp.

  • 🧾 Nguyên tắc cốt lõi: Bộ lọc chỉ biến đổi những gì hiển thị trên khung nhìn; giá trị được lưu trữ trong đối tượng phạm vi không bao giờ bị thay đổi.
  • ➖ Cú pháp pipe: Dấu gạch dọc phân tách biểu thức khỏi tên bộ lọc, và dấu hai chấm truyền một đối số cho biểu thức đó.
  • 🔤 Bộ lọc trường hợp: Các hàm lowercase và uppercase chuyển đổi chuỗi ký tự để hiển thị, và AngularJS không có bộ lọc viết hoa.
  • 🔢 Số lượng và đơn vị tiền tệ: Số (number) giới hạn số chữ số thập phân, trong khi tiền tố currency thêm một ký hiệu tùy thuộc vào ngôn ngữ địa phương vào trước giá trị.
  • 🛠️ Bộ lọc tùy chỉnh: Việc đăng ký một factory trả về một hàm sẽ tạo ra một bộ lọc có thể tái sử dụng trong toàn bộ module.
  • ⚡ Vấn đề tinh khiết: Bộ lọc phải trả về cùng một kết quả đầu ra cho cùng một đầu vào, bởi vì AngularJS lưu trữ kết quả và bỏ qua việc chạy lại các bộ lọc thuần túy.
Đọc thêm

Bộ lọc AngularJS và Bộ lọc tùy chỉnh

Bộ lọc trong AngularJS là gì?

A 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 dùng mà không làm thay đổi giá trị gốc. Ví dụ, nếu bạn muốn hiển thị một chuỗi ở dạng chữ thường hoặc chữ hoa, bạn có thể thực hiện điều đó bằng cách sử dụng bộ lọc. Các bộ lọc tích hợp sẵn như 'chữ thường' và 'chữ hoa' sẽ trả về chuỗi ở dạng chữ được yêu cầu, và còn có thêm các bộ lọc khác cho số, tiền tệ và JSON.

⚠️ Ghi chú phiên bản: AngularJS (nhánh 1.x) đã hết hạn hỗ trợ vào ngày 31 tháng 12 năm 2021 và sẽ không nhận được bất kỳ bản vá bảo mật nào nữa. Tất cả những thông tin bên dưới vẫn chính xác để duy trì các ứng dụng AngularJS hiện có; trong Angular hiện đại, vai trò tương tự được đảm nhiệm bởi một pipe.

Các bộ lọc được áp dụng trong khung nhìn bằng ký tự dấu gạch dọc (|). Trước khi xem xét từng bộ lọc, điều hữu ích là hiểu lý do tại sao bạn lại viết chúng.

Bộ lọc chữ thường trong AngularJS

Bộ lọc này nhận một chuỗi ký tự và hiển thị tất cả các ký tự của chuỗi đó ở dạng chữ thường.

Dưới đây, bộ điều khiển gửi một chuỗi đến giao diện người dùng thông qua đối tượng scope, và bộ lọc chuyển đổi chuỗi đó thành chữ thường.

Bộ lọc chữ thường trong AngularJS

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Event Registration</title>
</head>
<body>
<h1> Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>

<div ng-app="DemoApp" ng-controller="DemoController">
Tutorial Name : <input type="text" ng-model="tutorialName"><br>
This tutorial is {{tutorialName | lowercase}}
</div>

<script>
var app = angular.module('DemoApp', []);

app.controller('DemoController', ['$scope', function($scope) {
  $scope.tutorialName = "Angular JS";
}]);
</script>
</body>
</html>

Code Giải thích

  1. Chuỗi ký tự viết hoa và viết thường “Angular JS” được lưu trữ trong một biến thành viên có tên là tutorialName trên đối tượng phạm vi.
  2. Ký hiệu bộ lọc (|) đánh dấu đầu ra cần chuyển đổi, và lowercase Từ khóa này áp dụng bộ lọc tích hợp sẵn để chuyển toàn bộ chuỗi thành chữ thường.

⚠️ Đã áp dụng các chỉnh sửa cho mọi mục đăng tải. Cả sáu mẫu ban đầu đều có chung ba lỗi. chrset="UTF 8" không phải là thuộc tính hoặc mã hóa hợp lệ, và hiện tại charset="UTF-8". angular-route.js nạp trước angular.min.jsĐoạn mã này gây ra lỗi mô-đun và chưa từng được sử dụng — nó đã bị xóa, cũng như tham chiếu jQuery không được sử dụng. Văn bản cũng cho rằng giá trị là “AngularJS” trong khi mã đặt là “Angular JS”; văn bản hiện đã khớp.

Đầu ra:

Bộ lọc chữ thường trong AngularJS

Chuỗi ký tự có cả chữ hoa và chữ thường sẽ được chuyển đổi hoàn toàn thành chữ thường. Quá trình chuyển đổi ngược lại cũng hoạt động tương tự.

Bộ lọc chữ hoa trong AngularJS

Bộ lọc này là bộ lọc ngược lại với bộ lọc chữ thường, hiển thị mọi ký tự ở dạng chữ in hoa.

Dưới đây, bộ điều khiển gửi một chuỗi đến giao diện người dùng thông qua đối tượng scope, và bộ lọc chuyển đổi chuỗi đó thành chữ hoa.

Bộ lọc chữ hoa trong AngularJS

<!-- The head and library references are unchanged from the previous example -->
<div ng-app="DemoApp" ng-controller="DemoController">
Tutorial Name : <input type="text" ng-model="tutorialName"><br>
This tutorial is {{tutorialName | uppercase}}
</div>

<script>
app.controller('DemoController', ['$scope', function($scope) {
  $scope.tutorialName = "Angular JS";
}]);
</script>

Code Giải thích

  1. Chuỗi ký tự viết hoa và viết thường “Angular JS” được đặt trong tutorialName và được gắn vào đối tượng phạm vi.
  2. Ký hiệu bộ lọc (|) được theo sau bởi uppercase Từ khóa, vì vậy bộ lọc tích hợp sẽ hiển thị toàn bộ chuỗi ở dạng chữ hoa.

⚠️ Điều chỉnh: Phần giới thiệu ban đầu là "ví dụ về bộ lọc viết hoa trong AngularJS với tùy chọn viết thường", điều này hoàn toàn sai. Phần này minh họa bộ lọc viết hoa, và AngularJS không có bộ lọc viết hoa nào cả — việc chỉ viết hoa chữ cái đầu tiên yêu cầu một bộ lọc tùy chỉnh, mà các phần sau sẽ hướng dẫn cách xây dựng.

Đầu ra:

Bộ lọc chữ hoa trong AngularJS

Bộ lọc trường hợp không nhận đối số. Bộ lọc tiếp theo cho thấy cách dấu hai chấm truyền tham số cho bộ lọc.

Bộ lọc số trong AngularJS

Bộ lọc này định dạng một số và có thể giới hạn số chữ số thập phân được hiển thị.

Ví dụ dưới đây sử dụng bộ lọc số để hiển thị giá trị giới hạn ở hai chữ số thập phân. Bộ điều khiển gửi số đến giao diện người dùng thông qua đối tượng phạm vi, và bộ lọc được áp dụng trong giao diện người dùng.

Bộ lọc số trong AngularJS

<!-- The head and library references are unchanged -->
<div ng-app="DemoApp" ng-controller="DemoController">
This tutorialID is {{tutorialID | number:2}}
</div>

<script>
app.controller('DemoController', ['$scope', function($scope) {
  $scope.tutorialID = 3.565656;
}]);
</script>

Code Giải thích

  1. Một số có nhiều chữ số thập phân được lưu trữ trong một biến thành viên có tên là... tutorialID và được gắn vào đối tượng phạm vi.
  2. Ký hiệu bộ lọc (|) được theo sau bởi number:2Dấu hai chấm truyền một đối số, và số 2 thiết lập hai chữ số thập phân. Giá trị được làm tròn để hiển thị, vì vậy 3.565656 sẽ hiển thị là 3.57 trong khi phạm vi vẫn giữ nguyên số đầy đủ.

Đầu ra:

Bộ lọc số trong AngularJS

Việc chỉ định dạng một con số thông thường thường không đủ khi giá trị đó thể hiện số tiền, và đó là điều mà bộ lọc tiếp theo sẽ xử lý.

NHỮNG BÀI VIẾT LIÊN QUAN

Bộ lọc tiền tệ trong AngularJS

Bộ lọc này định dạng một số thành giá trị tiền tệ, thêm vào trước nó ký hiệu tiền tệ như $.

Trong ví dụ bên dưới, bộ điều khiển gửi một số đến giao diện người dùng thông qua đối tượng phạm vi, và bộ lọc tiền tệ được áp dụng trong giao diện người dùng.

Bộ lọc tiền tệ trong AngularJS

<!-- The head and library references are unchanged -->
<div ng-app="DemoApp" ng-controller="DemoController">
This tutorial Price is {{tutorialprice | currency}}
</div>

<script>
app.controller('DemoController', ['$scope', function($scope) {
  $scope.tutorialprice = 20.56;
}]);
</script>

Code Giải thích

  1. Một số được lưu trữ trong một biến thành viên có tên là tutorialprice và được gắn vào đối tượng phạm vi.
  2. Ký hiệu bộ lọc (|) được theo sau bởi currency lọc.

⚠️ Điều chỉnh: Bài viết gốc cho rằng đơn vị tiền tệ “phụ thuộc vào cài đặt ngôn ngữ được áp dụng cho máy”. Điều đó không đúng. AngularJS sử dụng ngôn ngữ được tích hợp sẵn trong thư viện, mặc định là en-US, vì vậy ký hiệu là $ bất kể hệ điều hành nào. Hãy tải thư viện phù hợp. angular-locale_*.js tập tin, hoặc truyền trực tiếp ký hiệu: {{tutorialprice | currency:"£"}}.

Đầu ra:

Bộ lọc tiền tệ trong AngularJS

Chuỗi ký tự và số là các giá trị đơn giản. Bộ lọc tích hợp cuối cùng xử lý toàn bộ đối tượng.

Bộ lọc JSON trong AngularJS

Bộ lọc này chuyển đổi một đối tượng thành một đối tượng được định dạng. JSON Chuỗi này rất hữu ích để kiểm tra dữ liệu phạm vi trong quá trình phát triển.

Trong ví dụ bên dưới, bộ điều khiển gửi một đối tượng đến giao diện người dùng thông qua đối tượng phạm vi, và bộ lọc JSON được áp dụng trong giao diện người dùng.

Bộ lọc JSON trong AngularJS

<!-- The head and library references are unchanged -->
<div ng-app="DemoApp" ng-controller="DemoController">
This tutorial is {{tutorial | json}}
</div>

<script>
app.controller('DemoController', ['$scope', function($scope) {
  $scope.tutorial = { TutorialID: 12, tutorialName: "Angular" };
}]);
</script>

Code Giải thích

  1. Một vật thể chứa TutorialID: 12 và tutorialName: "Angular" được đặt trong một biến thành viên có tên là tutorial và được gắn vào đối tượng phạm vi.
  2. Ký hiệu bộ lọc (|) được theo sau bởi json bộ lọc này chuyển đổi đối tượng thành văn bản JSON thụt lề.

⚠️ Điều chỉnh: Mô tả ban đầu cho rằng giá trị này là “một số” và “một chuỗi kiểu JSON”. Thực tế nó không phải cả hai. Nó là một JavaĐối tượng Script, và bộ lọc json là thứ chuyển đổi nó thành chuỗi JSON để hiển thị.

Đầu ra:

Bộ lọc JSON trong AngularJS

Năm bộ lọc này bao gồm các trường hợp phổ biến. Khi không bộ lọc nào cho ra kết quả bạn cần, bạn sẽ tự viết bộ lọc của riêng mình.

Bộ lọc tùy chỉnh AngularJS

Đôi khi các bộ lọc tích hợp sẵn trong AngularJS không đáp ứng được yêu cầu định dạng đầu ra. Trong trường hợp đó, có thể tạo một bộ lọc tùy chỉnh trong AngularJS để trả về đầu ra theo cách mong muốn.

Bộ lọc tùy chỉnh được đăng ký trên một mô-đun và sau đó hoạt động chính xác như một bộ lọc tích hợp sẵn. Các phần bên dưới sẽ trình bày về các bộ lọc tiêu chuẩn trước, vì bộ lọc tùy chỉnh sử dụng cùng cú pháp đường ống, sau đó sẽ hướng dẫn cách xây dựng một bộ lọc tùy chỉnh.

Cách tạo bộ lọc tùy chỉnh trong AngularJS

Trong ví dụ bên dưới, một chuỗi được truyền từ... điều khiển đến chế độ xem thông qua đối tượng phạm vi, nhưng không nên hiển thị nguyên trạng. Một bộ lọc tùy chỉnh trong AngularJS Nối thêm một chuỗi khác và hiển thị kết quả hoàn chỉnh.

Tạo bộ lọc tùy chỉnh trong AngularJS

<!-- The head and library references are unchanged -->
<div ng-app="DemoApp" ng-controller="DemoController">
This tutorial is {{tutorial | Demofilter}}
</div>

<script>
var app = angular.module('DemoApp', []);

// The factory runs once; the function it returns runs on every value
app.filter('Demofilter', function() {
  return function(input) {
    return input + " Tutorial";
  };
});

app.controller('DemoController', ['$scope', function($scope) {
  $scope.tutorial = "Angular";
}]);
</script>

Code Giải thích

  1. Chuỗi ký tự “Angular” được lưu trữ trong một biến thành viên có tên là tutorial và được gắn vào đối tượng phạm vi.
  2. AngularJS cung cấp filter Phương thức đăng ký được sử dụng để tạo bộ lọc tùy chỉnh. 'Demofilter' là tên được đặt cho nó, và tên đó cũng chính là tên mà giao diện người dùng tham chiếu đến.
  3. Đây là hình dạng tiêu chuẩn của một bộ lọc tùy chỉnh: hàm đã đăng ký là một nhà máy Trả về hàm thực hiện công việc. Hàm đó nhận giá trị cần lọc làm tham số đầu tiên và trả về kết quả — ở đây, là đầu vào có thêm hậu tố “Tutorial”.
  4. Bộ lọc được áp dụng trong giao diện người dùng bằng cách sử dụng cú pháp đường ống tương tự như bất kỳ bộ lọc tích hợp nào.

💡 Mẹo: Tên bộ lọc thường được viết bằng chữ thường hoặc theo kiểu camelCase. 'Demofilter' cũng được, nhưng một tên như... appendTutorial Dễ đọc hơn và tránh xung đột với tên có sẵn.

Đầu ra:

Tạo bộ lọc tùy chỉnh trong AngularJS

Từ 'Tutorial' đã được thêm vào chuỗi được truyền vào. tutorial Biến. Bộ lọc này luôn thêm cùng một đoạn văn bản, và phần tiếp theo sẽ hướng dẫn cách cấu hình đoạn văn bản đó.

Cách truyền tham số cho bộ lọc tùy chỉnh

Bộ lọc ở trên mã hóa cứng đoạn văn bản mà nó thêm vào, vì vậy nó chỉ có thể thực hiện một việc duy nhất. Các bộ lọc tích hợp sẵn như... number:2 Chấp nhận một đối số sau dấu hai chấm, và bộ lọc tùy chỉnh cũng vậy: mọi tham số sau tham số đầu tiên đều được ánh xạ tới một đối số được phân tách bằng dấu hai chấm trong giao diện người dùng.

Quy trình gồm ba bước: thêm tham số sau đó input Trong hàm trả về, hãy cung cấp giá trị mặc định cho bất kỳ tham số tùy chọn nào để bộ lọc vẫn hoạt động khi tham số bị bỏ qua, sau đó truyền các tham số vào view, phân tách bằng dấu hai chấm.

app.filter('appendText', function() {
  return function(input, suffix, separator) {
    if (!input) { return input; }        // guard against undefined
    separator = typeof separator === 'undefined' ? ' ' : separator;
    return input + separator + suffix;
  };
});

Sau đó, nội dung được trình bày như sau, trong đó “Hướng dẫn” trở thành suffix và dấu gạch ngang trở thành separator.

{{tutorial | appendText:"Tutorial"}}          // Angular Tutorial
{{tutorial | appendText:"Tutorial":" - "}}    // Angular - Tutorial

Có hai chi tiết dễ bị bỏ sót. Các đối số là các biểu thức của AngularJS, vì vậy một chuỗi ký tự cố định phải được đặt trong dấu ngoặc kép, trong khi một từ không được đặt trong dấu ngoặc kép sẽ được đọc như một thuộc tính phạm vi. Các bộ lọc cũng được xâu chuỗi, mỗi bộ lọc nhận đầu ra của bộ lọc trước đó: {{tutorial | appendText:"Tutorial" | uppercase}}.

⚠️ Cảnh báo: Hãy giữ cho bộ lọc thuần túy — cùng một đầu ra cho cùng một đầu vào, không có thay đổi bên ngoài. AngularJS lưu trữ bộ lọc thuần túy và chỉ chạy lại khi đầu vào thay đổi. Bộ lọc đọc đồng hồ hoặc thay đổi dịch vụ phải được đánh dấu là... $statefulĐiều này vô hiệu hóa bộ nhớ đệm và chạy bộ lọc trong mỗi chu kỳ xử lý dữ liệu, một nguyên nhân phổ biến gây ra hiện tượng tải trang chậm.

Bộ lọc không chỉ giới hạn ở các mẫu. Cùng một bộ lọc có thể được gọi từ... JavaKịch bản như được hiển thị bên dưới.

Cách sử dụng bộ lọc trong Controller với dịch vụ `$filter`

Việc áp dụng bộ lọc trong giao diện người dùng là trường hợp phổ biến, nhưng đôi khi giá trị đã được chuyển đổi lại cần thiết bên trong bộ điều khiển, ví dụ như trước khi gửi dữ liệu đến máy chủ. AngularJS cung cấp mọi bộ lọc đã đăng ký, cả tích hợp sẵn và tùy chỉnh, thông qua giao diện người dùng. $filter Dịch vụ. Tiêm nó vào, gọi nó với tên bộ lọc để lấy hàm lọc, sau đó gọi hàm đó với giá trị và bất kỳ đối số nào.

app.controller('DemoController', ['$scope', '$filter',
function($scope, $filter) {
  $scope.tutorial = "Angular";

  // Built-in filters, called from JavaScript
  $scope.shouted = $filter('uppercase')($scope.tutorial);      // "ANGULAR"
  $scope.price   = $filter('currency')(20.56);                 // "$20.56"

  // A custom filter works exactly the same way
  $scope.full    = $filter('appendText')($scope.tutorial, "Tutorial");
}]);

Cũng có một dạng ngắn gọn hơn: chèn tên bộ lọc theo sau là Filter, Chẳng hạn như uppercaseFilterNó cung cấp chức năng lọc trực tiếp và có thể được gọi ngay lập tức. Cả hai hình thức đều dẫn đến cùng một chức năng, vì vậy sự lựa chọn chỉ mang tính chất hình thức.

Có hai trường hợp sử dụng được nhắc đi nhắc lại. Trường hợp đầu tiên là chuẩn bị dữ liệu: ngày tháng thường phải được gửi đến API theo một khuôn mẫu cố định, và $filter('date')(value, 'yyyy-MM-dd') Cách thứ nhất là tạo ra nó mà không cần thay đổi giá trị được liên kết với biểu mẫu. Cách thứ hai là thu hẹp một tập hợp chỉ một lần trong bộ điều khiển, thay vì để nguyên như vậy. orderBy trong một ng-lặp lại biểu thức được chạy lại trên mỗi bản tóm tắt.

Các bộ lọc được chèn theo cách này vẫn được đăng ký trên mô-đun, vì vậy bộ lọc tùy chỉnh phải được khai báo bằng app.filter trước khi bất kỳ người điều khiển nào hỏi $filter vì điều đó. Nếu không, AngularJS sẽ báo lỗi nhà cung cấp không xác định.

Gọi bộ lọc trong JavaScript khác với template ở một điểm quan trọng: kết quả được tính toán một lần và lưu trữ trên scope thay vì được tính toán lại mỗi khi digest được thực thi. Điều đó khiến nó trở thành lựa chọn nhanh hơn cho một giá trị ít khi thay đổi, và là lựa chọn không phù hợp cho một giá trị phải thay đổi liên tục. track đầu vào của người dùng.

Câu Hỏi Thường Gặp

Không. AngularJS chỉ hỗ trợ chữ thường và chữ hoa. Việc viết hoa chữ cái đầu tiên của mỗi từ yêu cầu một bộ lọc tùy chỉnh để tách chuỗi và ghép lại, hoặc một quy tắc chuyển đổi văn bản CSS nếu thay đổi chỉ mang tính trực quan.

Bộ lọc được đăng ký trên một mô-đun khác với mô-đun được khởi tạo bởi ng-app, hoặc tập lệnh định nghĩa nó chạy trước khi AngularJS được tải. Hãy đăng ký bộ lọc trên cùng một mô-đun và tải thư viện trước.

Đúng vậy. Piping một bộ sưu tập bên trong ng-lặp lại Bộ lọc sắp xếp các mục trước khi chúng được hiển thị. Bộ lọc nhận toàn bộ mảng và phải trả về một mảng.

Vâng. AI Các trợ lý tạo ra nhà máy, hàm trả về và cú pháp hiển thị từ mô tả đơn giản về quy tắc định dạng. Kiểm tra xem bộ lọc được tạo ra có xử lý được đầu vào không xác định hay không.

Các công cụ AI viết lại factory thành một lớp triển khai giao diện PipeTransform và chuyển từng tham số bổ sung vào phương thức transform. RevHãy xem xét bất kỳ bộ lọc $stateful nào bằng tay, vì các đường ống không thuần khiết phải được khai báo rõ ràng.

Tóm tắt bài viết này với: