Các Filter bộ lọc trong AngularJS Filter được sử dụng để thay đổi, lọc dữ liệu cho kết quả là một chuỗi khác.. Dưới đây là danh sách các filter thông dụng thường được sử dụng.. STT Tên M
Trang 1Các Filter (bộ lọc) trong AngularJS
Filter được sử dụng để thay đổi, lọc dữ liệu cho kết quả là một chuỗi khác Dưới đây là danh sách các filter thông dụng thường được sử dụng
STT Tên Miêu tả
Thêm uppercase filter vào một expression, theo cách sử dụng dưới đây, kết quả trường tên của sinh viên sẽ được in hoa tất cả các ký tự
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}}
Thêm lowercase filter vào một expression Dưới đây là ví dụ cho bộ lọc với đầu ra là tất cả các ký
tự thường
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() lowercase}}
Thêm currency filter vào một expression Dưới đây là ví dụ cho bộ lọc currency trả về kết quả dưới định dạng tiền tệ
Enter fees: <input type="text" ng-model="student.fees">
fees: {{student.fees | currency}}
Trang 2B ộ lọc filter
Để chỉ hiển thị các subject được yêu cầu, chúng ta sử dụng subjectName như là filter
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>
Để sắp xếp các subject theo điểm số, chúng ta sử dụng orderBy marks
Subject:
<ul>
<li ng-repeat="subject in student.subjects | orderBy:'marks'">
{{ subject.name + ', marks:' subject.marks }}
</li>
</ul>
Ví d ụ
Dưới đây là một ví dụ hoàn chỉnh cho những gì được minh họa bên trên:
testAngularJS.jsp
<html>
<head>
<title>Angular JS Filters</title>
<script src="http://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">
Trang 3<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()
Trang 4var studentObject;
studentObject = $scope.student;
return studentObject.firstName + " " studentObject.lastName;
}
};
});
</script>
</body>
</html>
Mở trang textAngularJS.jsp trên trình duyệt web Và xem kết quả dưới đây