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

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

A Lọc trong AngularJS giúp định dạng giá trị của biểu thức để hiển thị cho người dùng mà không làm 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ể thực hiện việc đó bằ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.

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

Đôi khi các bộ lọc tích hợp trong Angular không thể đáp ứng được nhu cầu hoặc yêu cầu về lọc đầu ra. Trong trường hợp như vậy, bộ lọc tùy chỉnh AngularJS có thể được tạo, bộ lọc này có thể truyền đầu ra theo cách được yêu cầu.

Tương tự, đối với 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.

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

Trong ví dụ về bộ lọc tùy chỉnh AngularJS bên dưới, chúng ta sẽ chuyển một chuỗi tới chế độ xem từ bộ điều khiển thông qua đối tượng phạm vi, nhưng chúng ta không muốn chuỗi được hiển thị như hiện tại.

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 sẽ chuyển bộ lọc tùy chỉnh vào AngularJS, sẽ nối thêm một chuỗi khác và hiển thị chuỗi hoàn chỉnh cho người dùng.

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">

    This tutorial is {{tutorial | Demofilter}}

</div>
<script type="text/javascript">
    var app = angular.module('DemoApp',[]);
    app.filter('Demofilter',function(){
        return function(input)
        {
            return input + " Tutorial"
        }
    });

    app.controller('DemoController',function($scope){

        $scope.tutorial ="Angular";
     });

</script>

</body>
</html>

Giải thích mã

Ở đây chúng ta đang truyền một chuỗi “Angular” trong một biến thành viên có tên là tutorial và gắn nó vào đối tượng phạm vi.
Angular cung cấp dịch vụ 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 đó các bộ lọc tùy chỉnh trong AngularJS được xác định trong đó hàm được trả về. Hàm này chứa mã tùy chỉnh để tạo bộ lọc tùy chỉnh. Trong hàm của chúng ta, chúng ta đang lấy một chuỗi “Angular” được truyền từ chế độ xem của chúng ta đến bộ lọc và nối thêm chuỗi “Hướng dẫn” vào chuỗi này.
Chúng tôi đang sử dụng Demofilter trên biến thành viên được chuyển từ bộ điều khiển sang dạng xem.

Nếu mã được thực thi thành công, kết quả sau sẽ hiển thị khi bạn chạy mã trên 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 vào hướng dẫn biến thành viên.

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 sang chữ thường.

Trong ví dụ dưới đây, chúng ta sẽ sử dụng 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 bộ lọc trong dạng xem để chuyển đổi chuỗi thành chữ thường.

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

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

</div>
<script type="text/javascript">
    var app = angular.module('DemoApp',[]);
    app.controller('DemoController',function($scope){

        $scope.tutorialName ="Angular JS";
    });
</script>

</body>
</html>

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ự chữ thường và chữ hoa trong một biến thành viên có tên 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 “guideName” và đặt ký hiệu bộ lọc (|), điều đó 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 để nói rằ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, kết quả sau sẽ hiển thị khi bạn chạy mã trên trình duyệt.

Đầu ra:

Từ đầu ra

Có thể thấy, chuỗi “AngularJS” được truyền vào biến tutorialName là sự kết hợp giữa ký tự chữ thường và chữ hoa đã được thực thi.
Sau khi thực hiện, đầu ra 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à nó 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ề bộ lọc viết hoa AngularJS với tùy chọn chữ thường.

Trong ví dụ viết hoa AngularJS bên dưới, chúng ta sẽ sử dụng 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 bộ lọc trong dạng xem để chuyển đổi chuỗi thành chữ hoa.

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

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

</div>
<script type="text/javascript">
    var app = angular.module('DemoApp',[]);
    app.controller('DemoController',function($scope){

        $scope.tutorialName ="Angular JS";
    });
</script>

</body>
</html>

Giải thích mã

Ở đây chúng ta truyền một chuỗi là sự kết hợp của các ký tự chữ thường và chữ hoa “Angular JS” trong một biến thành viên có tên 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 “guideName” và đặt ký hiệu 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ữ hoa để nói rằng sử dụng bộ lọc tích hợp để xuất toàn bộ chuỗi ở dạng chữ hoa.

Nếu mã được thực thi thành công, kết quả sau sẽ hiển thị khi bạn chạy mã trên 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 ở tất 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 cho 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 bộ điều khiển để gửi một số đến chế độ xem thông qua đối tượng phạm vi. Sau đó, chúng tôi sẽ sử dụng bộ lọc trong dạng xem để áp dụng bộ lọc số.

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">

    This tutorialID is {{tutorialID | number:2}}

</div>
<script type="text/javascript">
    var app = angular.module('DemoApp',[]);
    app.controller('DemoController',function($scope){

        $scope.tutorialID =3.565656;
    });
</script>

</body>
</html>

Giải thích mã

Ở đây chúng ta chuyển một số có số vị trí thập phân lớn hơn trong một biến thành viên có tên là tutorialID 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 tutorialID và đặt ký hiệu 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 sẽ hạn chế số vị trí thập phân ở mức 2.

Nếu mã được thực thi thành công, kết quả sau sẽ hiển thị khi bạn chạy mã trên trình duyệt.

Đầu ra:

Từ đầu ra,

Có thể thấy rằng số được truyền vào biến tutorialID có số thập phân lớn đã bị giới hạn ở 2 chữ số thập phân do số: 2 bộ lọc được áp dụng.

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ì có thể sử dụng bộ lọc này.

Trong ví dụ dưới đây, chúng ta sẽ sử dụng bộ điều khiển để gửi một số đến chế độ xem thông qua đối tượng phạm vi. Sau đó, chúng tôi sẽ sử dụng bộ lọc trong chế độ xem để áp dụng bộ lọc hiện tại.

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">

    This tutorial Price is {{tutorialprice | currency}}

</div>
<script type="text/javascript">
    var app = angular.module('DemoApp',[]);
    app.controller('DemoController',function($scope){

        $scope.tutorialprice =20.56;
    });
</script>

</body>
</html>

Giải thích mã

Ở đây chúng ta chuyển một số trong một biến thành viên có tên là tutorialprice 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 tutorialprice và đặt ký hiệu bộ lọc (|) cùng với bộ lọc tiền tệ. Lưu ý rằng loại tiền được áp dụng tùy 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, kết quả sau sẽ hiển thị khi bạn chạy mã trên trình duyệt.

Đầu ra:

Từ đầu ra

Có thể thấy ký hiệu tiền tệ đã được thêm vào số được truyền vào biến tutorialprice.
Trong trường hợp của chúng tôi, vì cài đặt ngôn ngữ là tiếng Anh (Hoa Kỳ), ký hiệu $ được chèn làm đơn vị tiền tệ.

Bộ lọc JSON trong AngularJS

Bộ lọc này định dạng một JSON như đầu vào và áp dụng bộ lọc JSON của AngularJS để cung cấp đầu ra ở dạng JSON.

Trong ví dụ dưới đây, chúng ta sẽ sử dụng bộ điều khiển để gửi một đối tượng loại JSON đến một khung nhìn thông qua đối tượng phạm vi. Sau đó, chúng tôi sẽ sử dụng bộ lọc trong chế độ xem để áp dụng bộ lọc JSON.

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">

    This tutorial is {{tutorial | json}}

</div>
<script type="text/javascript">
    var app = angular.module('DemoApp',[]);
    app.controller('DemoController',function($scope){

        $scope.tutorial ={TutorialID:12,tutorialName:"Angular"};
    });
</script>

</body>
</html>

Giải thích mã

Ở đây chúng ta chuyển một số trong một biến thành viên có tên là “guide” và gắn nó vào đối tượng phạm vi. Biến thành viên này chứa chuỗi loại JSON gồm ID hướng dẫn:12 và Tên hướng dẫn:”Angular”.
Chúng tôi đang sử dụng hướng dẫn về biến thành viên và đặt ký hiệu bộ lọc (|) cùng với bộ lọc JSON.

Nếu mã được thực thi thành công, kết quả sau sẽ hiển thị khi bạn chạy mã trên trình duyệt.

Đầu ra:

Từ đầu ra,

Có thể thấy 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 phù hợp trong trình duyệt.

Tổng kết

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 hiển thị số bằng cách sử dụng bộ lọc số bằng cách chỉ định số điểm 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 ký hiệu 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ì góc cạnh cũng cung cấp bộ lọc JSON để lọc bất kỳ chuỗi nào giống JSON sang định dạng JSON.
Nếu có yêu cầu 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.

Bạn có thể thích:

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

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

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

Giải thích mã

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

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

Giải thích mã

Bộ lọc chữ hoa trong AngularJS

Giải thích mã

Bộ lọc số trong AngularJS

Giải thích mã

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

Giải thích mã

Bộ lọc JSON trong AngularJS

Giải thích mã

Tổng kết