AngularJS Filters là một tính năng quan trọng của AngularJS, cho phép chúng ta sử dụng các bộ lọc để định dạng và xử lý dữ liệu trước khi hiển thị chúng trên giao diện người dùng. Filters giúp cho dữ liệu được hiển thị theo các yêu cầu đặc biệt của người dùng, đồng thời tăng tính tương tác và trải nghiệm người dùng của ứng dụng. Trong bài viết này, chúng ta sẽ tìm hiểu về các loại Filters cơ bản, cách sử dụng Filters trong AngularJS, và cách tạo Custom Filters để đáp ứng các yêu cầu cụ thể của dự án.
Các loại AngularJS Filters
Có ba loại Filters cơ bản trong AngularJS, bao gồm:
- Filters chuỗi: Được sử dụng để định dạng và xử lý dữ liệu kiểu chuỗi, ví dụ như chuyển đổi chữ hoa sang chữ thường, cắt bớt chuỗi, định dạng số điện thoại, email…
- Filters số: Được sử dụng để định dạng và xử lý dữ liệu kiểu số, ví dụ như định dạng số tiền, thêm dấu phẩy ngăn cách hàng ngàn, làm tròn số, tính tổng số…
- Filters ngày tháng: Được sử dụng để định dạng và xử lý dữ liệu kiểu ngày tháng, ví dụ như định dạng ngày tháng, thời gian, tính khoảng cách giữa hai ngày, định dạng theo múi giờ…
Các Filters cơ bản này giúp cho việc định dạng và xử lý dữ liệu trở nên đơn giản và thuận tiện hơn, đồng thời giúp cho người dùng có thể tương tác với ứng dụng một cách dễ dàng và thuận tiện hơn.
Cách sử dụng AngularJS Filters
Để sử dụng Filters trong AngularJS, chúng ta có thể áp dụng Filters trực tiếp vào dữ liệu trong template HTML bằng cách sử dụng cú pháp sau:
{{ expression | filter }}
Trong đó, expression là biểu thức dữ liệu cần định dạng hoặc xử lý, và filter là tên của Filters cần sử dụng. Ví dụ:
<p>Chào mừng bạn đến với {{ 'AngularJS' | uppercase }}!</p>Trong ví dụ trên, chúng ta sử dụng Filters uppercase để chuyển đổi chuỗi “AngularJS” thành chữ in hoa.
Chúng ta cũng có thể sử dụng Filters trong các biểu thức của directive, ví dụ như:
<li ng-repeat="product in products | orderBy:'price'">
Trong ví dụ trên, chúng ta sử dụng Filters orderBy để sắp xếp các sản phẩm theo giá thành.
AngularJS cung cấp sẵn một số Filters cơ bản cho chúng ta sử dụng, ví dụ như uppercase, lowercase, currency, date, limitTo, orderBy… Ngoài ra, chúng ta cũng có thể tạo Custom Filters để đáp ứng các yêu cầu cụ thể của dự án.
Xem thêm Filter trong javascript là gì ?
Custom Filters trong AngularJS
Trong AngularJS, chúng ta có thể tạo Custom Filters để định dạng hoặc xử lý dữ liệu theo các yêu cầu cụ thể của dự án. Để tạo Custom Filters, chúng ta có thể sử dụng phương thức filter() của module.
Cú pháp tạo Custom Filters như sau:
angular.module('myApp', []).filter('myFilter', function() {
return function(input) {
// Xử lý dữ liệu đầu vào
return output;
};
});Trong đó, myApp là tên của module trong ứng dụng, myFilter là tên của Filter mới được tạo, và hàm trả về được sử dụng để xử lý dữ liệu đầu vào.
Ví dụ, chúng ta có thể tạo một Custom Filter để đảo ngược chuỗi đầu vào:
angular.module('myApp', []).filter('reverse', function() {
return function(input) {
return input.split('').reverse().join('');
};
});Sau đó, chúng ta có thể sử dụng Custom Filter reverse trong template HTML như sau:
<p>{{ 'hello world' | reverse }}</p>Kết quả sẽ là chuỗi “dlrow olleh”.
Chúng ta cũng có thể sử dụng Custom Filter trong directive, ví dụ như:
<li ng-repeat="product in products | orderBy:'price' | discount">
Trong ví dụ trên, chúng ta sử dụng Custom Filter discount để giảm giá các sản phẩm theo một tiêu chí cụ thể nào đó.
Xem thêm Hướng dẫn chèn code trong wordpress sử dụng Code Snippets
Trong AngularJS, các Filters được sử dụng để định dạng dữ liệu. Sau đây là danh sách các Filters được sử dụng để chuyển đổi dữ liệu.
| Lọc | Sự miêu tả |
| Currency | Nó định dạng một số thành một định dạng tiền tệ. |
| Date | Nó định dạng ngày thành một định dạng cụ thể. |
| Filter | Nó chọn một tập hợp con các mục từ một mảng. |
| Json | Nó định dạng một đối tượng thành một chuỗi Json. |
| Limit | Nó được sử dụng để giới hạn một mảng / chuỗi, thành một số phần tử / ký tự được chỉ định. |
| Lowercase | Nó định dạng một chuỗi thành chữ thường. |
| Number | Nó định dạng một số thành một chuỗi. |
| Orderby | Nó sắp xếp thứ tự một mảng bằng một expressions. |
| Uppercase | Nó định dạng một chuỗi thành chữ hoa. |
Các bài viết liên quan:
Cách thêm Filters vào expressions
Bạn có thể thêm Filters vào expressions bằng cách sử dụng ký tự ống dẫn |, theo sau là Filters.
Trong ví dụ này, các chuỗi định dạng Filters chữ hoa thành chữ hoa:
Xem ví dụ này:
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="personCtrl">
<p>Tên là {{ firstName | uppercase }}</p>
</div>
<script>
angular.module('myApp', []).controller('personCtrl', function($scope) {
$scope.firstName = "Sonoo",
$scope.lastName = "Jaiswal"
});
</script>
</body>
</html>
Hãy áp dụng Filters chữ thường vào cùng một ví dụ:
Xem thêm AngularJS Forms
Xem ví dụ này:
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="personCtrl">
<p>Tên là {{ firstName | lowercase }}</p>
</div>
<script>
angular.module('myApp', []).controller('personCtrl', function($scope) {
$scope.firstName = "Sonoo",
$scope.lastName = "Jaiswal"
});
</script>
</body>
</html>
Cách thêm Filters vào directives
Filters có thể được thêm vào các directives, như ng-repeat, bằng cách sử dụng ký tự ống dẫn |, theo sau là một Filters.
Hãy lấy một ví dụ:
Trong ví dụ này, Filters orderBy được sử dụng để sắp xếp một mảng.
Xem ví dụ này:
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="namesCtrl">
<p>Vòng lặp với các đối tượng:</p>
<ul>
<li ng-repeat="x in names | orderBy:'country'">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
{name:'Ramesh',country:'India'},
{name:'Alex',country:'USA'},
{name:'Pooja',country:'India'},
{name:'Mahesh',country:'India'},
{name:'Iqbal',country:'Pakistan'},
{name:'Ramanujam',country:'India'},
{name:'Osama',country:'Iraq'},
{name:'Johnson',country:'UK'},
{name:'Karl',country:'Russia'}
];
});
</script>
</body>
</html>
Xem thêm AngularJS HTML DOM
Filter Filter
Filters Filter chỉ có thể được sử dụng trên các mảng vì nó chọn một tập hợp con của một mảng. Nó trả về một mảng chỉ chứa các mục phù hợp.
Hãy lấy một ví dụ:
Ví dụ này sẽ trả về các tên có chứa chữ cái “o”.
Xem ví dụ này:
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
<li ng-repeat="x in names | filter : 'o'">
{{ x }}
</li>
</ul>
</div>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
'Ramesh',
'Pooja',
'Mahesh',
'Ramanujam',
'Osama',
'Iqbal',
'Karl',
'Johnson',
'Alex'
];
});
</script>
<p>Ví dụ này chỉ hiển thị các tên có chứa chữ cái "o".</p>
</body>
</html>
Filter một Array dựa trên user input
Bạn có thể sử dụng giá trị của trường đầu vào như một expressions trong Filters bằng cách đặt lệnh ng-model trên trường đầu vào.
Xem ví dụ này:
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="namesCtrl">
<p>Type a letter in the input field:</p>
<p><input type="text" ng-model="test"></p>
<ul>
<li ng-repeat="x in names | filter:test">
{{ x }}
</li>
</ul>
</div>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
'Ramesh',
'Pooja',
'Mahesh',
'Ramanujam',
'Osama',
'Iqbal',
'Karl',
'Johnson',
'Alex'
];
});
</script>
<p>Danh sách sẽ chỉ chứa các tên phù hợp với Filters. </p>
</body>
</html>
Sắp xếp một Array dựa trên input user
Bạn có thể sắp xếp một mảng theo các cột của bảng.
Xem ví dụ này:
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<p> Nhấp vào tiêu đề bảng để thay đổi thứ tự sắp xếp: </p>
<div ng-app="myApp" ng-controller="namesCtrl">
<table border="1" width="100%">
<tr>
<th ng-click="orderByMe('name')">Tên</th>
<th ng-click="orderByMe('country')">Quốc gia</th>
</tr>
<tr ng-repeat="x in names | orderBy:myOrderBy">
<td>{{x.name}}</td>
<td>{{x.country}}</td>
</tr>
</table>
</div>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
{name:'Ramesh',country:'India'},
{name:'Alex',country:'USA'},
{name:'Pooja',country:'India'},
{name:'Mahesh',country:'India'},
{name:'Iqbal',country:'Pakistan'},
{name:'Ramanujam',country:'India'},
{name:'Osama',country:'Iraq'},
{name:'Johnson',country:'UK'},
{name:'Karl',country:'Russia'}
];
$scope.orderByMe = function(x) {
$scope.myOrderBy = x;
}
});
</script>
</body>
</html>
Filters tùy chỉnh AngularJS
Bạn có thể tạo Filters của riêng mình bằng cách đăng ký một chức năng mới của nhà máy Filters với mô-đun của bạn.
Xem ví dụ này:
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<p>Nhấp vào tiêu đề bảng để thay đổi thứ tự sắp xếp:</p>
<div ng-app="myApp" ng-controller="namesCtrl">
<table border="1" width="100%">
<tr>
<th ng-click="orderByMe('name')">Tên </th>
<th ng-click="orderByMe('country')">Quốc gia</th>
</tr>
<tr ng-repeat="x in names | orderBy:myOrderBy">
<td>{{x.name}}</td>
<td>{{x.country}}</td>
</tr>
</table>
</div>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
{name:'Ramesh',country:'India'},
{name:'Alex',country:'USA'},
{name:'Pooja',country:'India'},
{name:'Mahesh',country:'India'},
{name:'Iqbal',country:'Pakistan'},
{name:'Ramanujam',country:'India'},
{name:'Osama',country:'Iraq'},
{name:'Johnson',country:'UK'},
{name:'Karl',country:'Russia'}
];
$scope.orderByMe = function(x) {
$scope.myOrderBy = x;
}
});
</script>
</body>
</html>
Tổng kết về AngularJS Filters
Trong bài viết này, chúng ta đã tìm hiểu về AngularJS Filters – một tính năng rất hữu ích của AngularJS để xử lý và định dạng dữ liệu hiển thị trong ứng dụng web.
Chúng ta đã biết được các loại Filters cơ bản như currency, date, filter, limitTo, lowercase, uppercase, và orderBy. Chúng ta cũng đã thực hành cách sử dụng Filters trong template HTML và directive của AngularJS.
Ngoài ra, chúng ta cũng đã tìm hiểu cách tạo Custom Filters để đáp ứng các yêu cầu xử lý dữ liệu cụ thể của dự án.
Các Filters giúp chúng ta giảm bớt việc xử lý dữ liệu trên phía máy chủ và tăng tốc độ tải trang web. Với những kiến thức vừa học, hy vọng rằng bạn có thể áp dụng thành công các Filters trong dự án AngularJS của mình để tối ưu hóa hiệu suất và trải nghiệm người dùng tốt hơn.
