các filter thông dụng thường được sử dụng.
STTTên Miêu tả
http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 26
2 lowercase Chuyển văn bản sang dạng chữ thường 3 currency Định dạng văn bản dạng tiền tệ
4 filter Lọc các mảng, kết quả là chuỗi con dựa trên các điều kiện cung cấp
5 orderby Sắp xếp các mảng dựa vào các thông tin cung cấp
Bộ lọc uppercase
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}}
Bộ lọc lowercase
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ự viế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}}
Bộ lọc currency
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}}
Bộ 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">
http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 27 <ul>
<li ng-repeat="subject in student.subjects | filter: subjectName">
{{ subject.name + ', marks:' + subject.marks }}
</li> </ul>
Bộ lọc orderby
Để 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">
<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>
http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 28 <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; }
http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 29 }); </script> </body> </html> Kết quả
Mở trang textAngularJS.jsp trên trình duyệt web. Và xem kết quả dưới đây.
AngularJS - Bảng