By GokiSoft.com| 10:38 09/02/2022|
AngularJS

[Video] Tìm hiểu về Filter trong AngularJS - C2108G3


#index.html


<!DOCTYPE html>
<html ng-app="MyApp">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>AngularJS tutorial</title>
	<!-- Bootstrap -> thiet ke GUI -->
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

	<!-- AngularJS -> framework (js) -> duoc viet bang js (library js) -> file .js -> nhung cdn vao web -->
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body ng-controller="MyController">

<div class="container">
	<input type="text" name="test" class="form-control" ng-model="content">
	<h2>{{ content | uppercase }}</h2>
	<h2>{{ content | lowercase }}</h2>
	<input type="text" name="test" class="form-control" ng-model="money">
	<h2>{{ money | currency:'$' }}</h2>

	<p>Filter: Properties</p>
	<input type="text" class="form-control" ng-model="sName">
	<table class="table table-bordered">
		<thead>
			<tr>
				<th>No</th>
				<th>Full Name</th>
				<th>Age</th>
			</tr>
		</thead>
		<tbody>
			<tr ng-repeat="item in studentList | filter:sName">
				<td>{{ $index + 1 }}</td>
				<td>{{ item.fullname | uppercase }}</td>
				<td>{{ item.age }}</td>
			</tr>
		</tbody>
	</table>

	<p>Filter: Age >= gia tri nhap</p>
	<input type="text" class="form-control" ng-model="search">
	<input type="text" class="form-control" ng-model="fullname">
	<table class="table table-bordered">
		<thead>
			<tr>
				<th>No</th>
				<th>Full Name</th>
				<th>Age</th>
			</tr>
		</thead>
		<tbody>
			<tr ng-repeat="item in studentList | myFilter:search:fullname">
				<td>{{ $index + 1 }}</td>
				<td>{{ item.fullname }}</td>
				<td>{{ item.age }}</td>
			</tr>
		</tbody>
	</table>
</div>
<script type="text/javascript">
	var app = angular.module('MyApp', [])

	app.controller('MyController', ['$scope', function ($scope) {
		$scope.studentList = [
			{
				'fullname': 'Tran Van A',
				'age': 12
			}, {
				'fullname': 'Tran Van B',
				'age': 32
			}, {
				'fullname': 'Tran Van C',
				'age': 22
			}
		]
	}])

	app.filter('myFilter', function() {
		return function(items, minAge, fullname) {
			if(minAge == '' || minAge == null) {
				minAge = 0
			}

			var itemList = []
			for (item of items) {
				//Co the kiem tra them voi fullname -> tu lam them
				if(item.age >= minAge) {
					itemList.push(item)
				}
			}

			return itemList;
		}
	})
</script>
</body>
</html>


#table.html


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Student Management</title>
</head>
<body>
<table class="table table-bordered">
	<thead>
		<tr>
			<th>No</th>
			<th>FullName</th>
			<th>Age</th>
			<th>Email</th>
			<th>Address</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>1</td>
			<td>1</td>
			<td>1</td>
			<td>1</td>
			<td>1</td>
		</tr>
		<tr>
			<td>1</td>
			<td>1</td>
			<td>1</td>
			<td>1</td>
			<td>1</td>
		</tr>
		<tr>
			<td>1</td>
			<td>1</td>
			<td>1</td>
			<td>1</td>
			<td>1</td>
		</tr>
	</tbody>
</table>
</body>
</html>


Tags:



Phản hồi từ học viên

5

(Dựa trên đánh giá ngày hôm nay)

Đăng nhập để làm bài kiểm tra

Chưa có kết quả nào trước đó