Trong ví dụ này, chúng ta sẽ xây dựng một trang web đơn giản sử dụng tính năng Filter trong AngularJS.
Trang web sẽ hiển thị một danh sách thông tin về người dùng, tính năng Filter được sử dụng để tìm kiếm những người dùng có thông tin trùng với thông tin được nhập vào.
Tạo trang index.html với mã nguồn như bên dưới:
<html>
<head>
<title>L01</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myController">
<div style="margin-left:15pt">
<h3>List students</h3>
<div>
<pre>Click header link to sort, input into filter text to filter</pre>
<hr />
<table class="table table-striped">
<thead>
<tr>
<th>
<a href="">Name</a>
</th>
<th>
<a href=""> Age</a>
</th>
<th>
<a href="">Gender</a>
</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
Khởi tạo danh sách các giảng viên với chỉ thị ng-init và hiển thị ra trang web.
<html>
<head>
<title>L01</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myController">
<div style="margin-left:15pt">
<h3>List students</h3>
<div ng-init="lecturers = [
{name: 'Huong Hoang Luong', age: 30, gender: 'Male'},
{name: 'Nhung Mai Thi Cam', age: 27, gender: 'Female'},
{name: 'Nghi Cong Tran', age: 27, gender: 'Male'},
{name: 'Trung Phuoc Le', age: 25, gender: 'Male'} ]"
>
<pre>Click header link to sort, input into filter text to filter</pre>
<hr />
<table class="table table-striped">
<thead>
<tr>
<th>
<a href="">Name</a>
</th>
<th>
<a href=""> Age</a>
</th>
<th>
<a href="">Gender</a>
</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" /></td>
<td><input type="text"/></td>
<td><input type="text" /></td>
</tr>
<tr ng-repeat="obj in lecturers">
<td>{{obj.name}}</td>
<td>{{obj.age}}</td>
<td>{{obj.gender}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
<script>
var app = angular.module("myApp",[]);
app.controller("myController", function($scope){
});
</script>
</html>Chạy trang index.html để xem kết quả.
Thay đổi mã nguồn trang index.html, để bổ sung tìm kiếm thông tin dựa vào dữ liệu người dùng nhập vào ở các Textbox.
<tbody>
<tr>
<td><input type="text" ng-model="search.name" /></td>
<td><input type="text" ng-model="search.age"/></td>
<td><input type="text" ng-model="search.gender" /></td>
</tr>
<tr ng-repeat="obj in lecturers | filter:search">
<td>{{obj.name}}</td>
<td>{{obj.age}}</td>
<td>{{obj.gender}}</td>
</tr>
</tbody>Chạy trang index.html trên trình duyệt, nhập nội dung vào một trong các ô textbox để kiểm tra kết quả.
Chỉnh sửa lại mã nguồn trang index.html để bổ sung chức năng sắp xếp dữ liệu khi người dùng nhấn vào các liên kết.
<table class="table table-striped">
<thead>
<tr>
<th>
<a href="" ng-click="order('name')">Name</a>
</th>
<th>
<a href="" ng-click="order('age')"> Age</a>
</th>
<th>
<a href="" ng-click="order('gender')">Gender</a>
</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" ng-model="search.name" /></td>
<td><input type="text" ng-model="search.age" /></td>
<td><input type="text" ng-model="search.gender" /></td>
</tr>
<tr ng-repeat="obj in lecturers | orderBy:predicate:reverse | filter:search">
<td>{{obj.name}}</td>
<td>{{obj.age}}</td>
<td>{{obj.gender}}</td>
</tr>
</tbody>
</table>
............................
<script>
var app = angular.module("myApp",[]);
app.controller("myController", function($scope){
$scope.predicate = 'name';
$scope.reverse = true;
$scope.order = function (predicate) {
$scope.reverse = ($scope.predicate === predicate) ? !$scope.reverse : false;
$scope.predicate = predicate;
};
});
</script>Chạy trang index.html và kiểm tra kết quả cuối cùng.
Mã nguồn hoàn chỉnh của chương trình như sau:
<html>
<head>
<title>L01</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myController">
<div style="margin-left:15pt">
<h3>List students</h3>
<div ng-init=" lecturers = [
{name: 'Huong Hoang Luong', age: 30, gender: 'Male'},
{name: 'Nhung Mai Thi Cam', age: 27, gender: 'Female'},
{name: 'Nghi Cong Tran', age: 27, gender: 'Male'},
{name: 'Trung Phuoc Le', age: 25, gender: 'Male'} ]"
>
<pre>Click header link to sort, input into filter text to filter</pre>
<hr />
<table class="table table-striped">
<thead>
<tr>
<th>
<a href="" ng-click="order('name')">Name</a>
</th>
<th>
<a href="" ng-click="order('age')"> Age</a>
</th>
<th>
<a href="" ng-click="order('gender')">Gender</a>
</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" ng-model="search.name" /></td>
<td><input type="text" ng-model="search.age" /></td>
<td><input type="text" ng-model="search.gender" /></td>
</tr>
<tr ng-repeat="obj in lecturers | orderBy:predicate:reverse | filter:search">
<td>{{obj.name}}</td>
<td>{{obj.age}}</td>
<td>{{obj.gender}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
<script>
var app = angular.module("myApp",[]);
app.controller("myController", function($scope){
$scope.predicate = 'name';
$scope.reverse = true;
$scope.order = function (predicate) {
$scope.reverse = ($scope.predicate === predicate) ? !$scope.reverse : false;
$scope.predicate = predicate;
};
});
</script>
</html>
Lương Hoàng Hướng 
Bình luận về bài viết này