AngularJS - Bộ lọc
Bộ lọc được sử dụng để sửa đổi dữ liệu. Chúng có thể được xếp thành câu lạc bộ trong biểu thức hoặc chỉ thị bằng cách sử dụng ký tự ống (|). Danh sách sau đây hiển thị các bộ lọc thường được sử dụng.
| Sr.No. | Tên & Mô tả |
|---|---|
| 1 | uppercase chuyển đổi một văn bản thành văn bản chữ hoa. |
| 2 | lowercase chuyển đổi một văn bản thành văn bản viết thường. |
| 3 | currency định dạng văn bản theo định dạng tiền tệ. |
| 4 | filter lọc mảng thành một tập hợp con của nó dựa trên các tiêu chí được cung cấp. |
| 5 | orderby sắp xếp thứ tự mảng dựa trên tiêu chí được cung cấp. |
Bộ lọc chữ hoa
Thêm bộ lọc chữ hoa vào một biểu thức bằng cách sử dụng ký tự ống dẫn. Ở đây chúng tôi đã thêm bộ lọc chữ hoa để in tên học sinh bằng tất cả các chữ cái viết hoa.
Enter first name:<input type = "text" ng-model = "student.firstName">
Enter last name: <input type = "text" ng-model = "student.lastName">
Name in Upper Case: {{student.fullName() | uppercase}}Bộ lọc chữ thường
Thêm bộ lọc chữ thường vào biểu thức bằng cách sử dụng ký tự ống dẫn. Ở đây chúng tôi đã thêm bộ lọc chữ thường để in tên học sinh bằng tất cả các chữ thường.
Enter first name:<input type = "text" ng-model = "student.firstName">
Enter last name: <input type = "text" ng-model = "student.lastName">
Name in Lower Case: {{student.fullName() | lowercase}}Bộ lọc tiền tệ
Thêm bộ lọc tiền tệ vào biểu thức trả về số bằng cách sử dụng ký tự ống dẫn. Ở đây, chúng tôi đã thêm bộ lọc tiền tệ để in phí sử dụng định dạng tiền tệ.
Enter fees: <input type = "text" ng-model = "student.fees">
fees: {{student.fees | currency}}Bộ lọc
Để chỉ hiển thị các chủ đề bắt buộc, chúng tôi sử dụng subjectName làm bộ lọc.
Enter subject: <input type = "text" ng-model = "subjectName">
Subject:
<ul>
<li ng-repeat = "subject in student.subjects | filter: subjectName">
{{ subject.name + ', marks:' + subject.marks }}
</li>
</ul>OrderBy Filter
Để sắp xếp các môn học theo dấu, chúng tôi sử dụng dấu orderBy.
Subject:
<ul>
<li ng-repeat = "subject in student.subjects | orderBy:'marks'">
{{ subject.name + ', marks:' + subject.marks }}
</li>
</ul>Thí dụ
Ví dụ sau cho thấy việc sử dụng tất cả các bộ lọc được đề cập ở trên.
testAngularJS.htm
<html>
<head>
<title>Angular JS Filters</title>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app = "mainApp" ng-controller = "studentController">
<table border = "0">
<tr>
<td>Enter first name:</td>
<td><input type = "text" ng-model = "student.firstName"></td>
</tr>
<tr>
<td>Enter last name: </td>
<td><input type = "text" ng-model = "student.lastName"></td>
</tr>
<tr>
<td>Enter fees: </td>
<td><input type = "text" ng-model = "student.fees"></td>
</tr>
<tr>
<td>Enter subject: </td>
<td><input type = "text" ng-model = "subjectName"></td>
</tr>
</table>
<br/>
<table border = "0">
<tr>
<td>Name in Upper Case: </td><td>{{student.fullName() | uppercase}}</td>
</tr>
<tr>
<td>Name in Lower Case: </td><td>{{student.fullName() | lowercase}}</td>
</tr>
<tr>
<td>fees: </td><td>{{student.fees | currency}}
</td>
</tr>
<tr>
<td>Subject:</td>
<td>
<ul>
<li ng-repeat = "subject in student.subjects | filter: subjectName |orderBy:'marks'">
{{ subject.name + ', marks:' + subject.marks }}
</li>
</ul>
</td>
</tr>
</table>
</div>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller('studentController', function($scope) {
$scope.student = {
firstName: "Mahesh",
lastName: "Parashar",
fees:500,
subjects:[
{name:'Physics',marks:70},
{name:'Chemistry',marks:80},
{name:'Math',marks:65}
],
fullName: function() {
var studentObject;
studentObject = $scope.student;
return studentObject.firstName + " " + studentObject.lastName;
}
};
});
</script>
</body>
</html>Đầu ra
Mở tệp kiểm traAngularJS.htm trong trình duyệt web. Xem kết quả.