By GokiSoft.com| 16:01 16/02/2022|
AngularJS

[Video] Tìm hiểu Directives & Filters & Routes in AngularJS - C2110I


#index.html


<!DOCTYPE html>
<html ng-app="MyApp">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Directives & Filters & Routes in AngularJS</title>

	<!-- Nhung thu vien bootstrap -->
	<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>

	<!-- Nhung js angularjs vao du an (Framework) -->
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

	<style type="text/css">
		.form-group {
			margin-bottom: 15px;
		}
	</style>
</head>
<body ng-controller="MyController">
<div class="container">
	<!-- remove tag khoi website -->
	<h1 ng-if="false">Test ng-if</h1>
	<!-- style="display: block;" -->
	<h1 ng-show="true">Test ng-show ON</h1>
	<!-- style="display: none;" -->
	<h1 ng-show="false">Test ng-show OFF</h1>
	<!-- style="display: none;" -->
	<h1 ng-hide="true">Test ng-hide ON</h1>
	<!-- style="display: block;" -->
	<h1 ng-hide="false">Test ng-hide OFF</h1>
</div>
<!-- Tim hieu ky hon thong chuong trinh quan ly sach -->
<!-- Book: title, price, author -->
<div class="container">
	<h1 style="color: red">QUAN LY THONG TIN SACH</h1>
	<div class="form-group">
		<label>Title: </label>
		<input type="text" placeholder="Enter title" class="form-control" ng-model="title">
	</div>
	<div class="form-group">
		<label>Price: </label>
		<input type="number" placeholder="Enter price" class="form-control" ng-model="price">
	</div>
	<div class="form-group">
		<label>Author: </label>
		<input type="text" placeholder="Enter author" class="form-control" ng-model="author">
	</div>
	<div class="form-group">
		<button class="btn btn-success" ng-click="saveBook()">Save Book</button>
	</div>

	<input type="text" class="form-control" placeholder="Filter every fields ..." ng-model="searchall">
	<table class="table table-bordered">
		<thead>
			<tr>
				<th style="width: 50px">No</th>
				<th>Title</th>
				<th>Price</th>
				<th>Author</th>
				<th style="width: 50px"></th>
				<th style="width: 50px"></th>
			</tr>
		</thead>
		<tbody>
			<!-- <tr ng-repeat="book in bookList track by $index"> -->
			<!-- <tr ng-repeat="book in bookList | filter:searchall track by $index"> -->
			<tr ng-repeat="book in bookList | filter:searchall">
				<td>{{ $index + 1 }}</td>
				<td>{{ book.title | uppercase }}</td>
				<td style="color: red">{{ book.price | currency:'VND' }}</td>
				<td>{{ book.author | lowercase }}</td>
				<th style="width: 50px"><button class="btn btn-warning">Edit</button></th>
				<th style="width: 50px"><button class="btn btn-danger" ng-click="removeBook($index)">Remove</button></th>
			</tr>
		</tbody>
	</table>

	<input type="text" class="form-control" placeholder="Filter title ..." ng-model="searchTitle">
	<table class="table table-bordered">
		<thead>
			<tr>
				<th style="width: 50px">No</th>
				<th>Title</th>
				<th>Price</th>
				<th>Author</th>
				<th style="width: 50px"></th>
				<th style="width: 50px"></th>
			</tr>
		</thead>
		<tbody>
			<tr ng-repeat="book in bookList | filterTitle:searchTitle">
				<td>{{ $index + 1 }}</td>
				<td>{{ book.title | uppercase }}</td>
				<td style="color: red">{{ book.price | currency:'VND' }}</td>
				<td>{{ book.author | lowercase }}</td>
				<th style="width: 50px"><button class="btn btn-warning">Edit</button></th>
				<th style="width: 50px"><button class="btn btn-danger" ng-click="removeBook($index)">Remove</button></th>
			</tr>
		</tbody>
	</table>
</div>
<script type="text/javascript">
	var app = angular.module('MyApp', [])

	app.filter('filterTitle', function() {
		return function(bookList, searchTitle) {
			if(searchTitle == null || searchTitle == '') {
				return bookList
			}

			var newBookList = []

			for(var item of bookList) {
				if(item.title.includes(searchTitle)) {
					newBookList.push(item)
				}
			}

			return newBookList
		}
	})

	app.controller('MyController', ['$scope', function ($scope) {
		// Khai bao binding data
		$scope.title = ''
		$scope.price = 0
		$scope.author = ''

		$scope.bookList = []
		// fake data
		// $scope.bookList.push({
		// 	'title': 'Sach 1',
		// 	'price': 12,
		// 	'author': 'abc'
		// })
		// $scope.bookList.push({
		// 	'title': 'Sach 2',
		// 	'price': 33,
		// 	'author': 'abdfgc'
		// })
		
		$scope.saveBook = function() {
			$scope.bookList.push({
				'title': $scope.title,
				'price': $scope.price,
				'author': $scope.author
			})
		}

		$scope.removeBook = function(index) {
			var option = confirm('Are you sure to remove this book?')
			if(!option) return

			$scope.bookList.splice(index, 1)
		}
	}])
</script>
</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 đó