[Source Code] Tìm hiểu về AngularJS - Directive - C2206L

#vidu.html

Name: ZicZac: Thiết kế web & app & quản lý tồn kho
Address: Số 08 Tôn Thất Thuyết, Cầu Giấy, Hà Nội, Nam Từ Liêm, Hà Nội, 100000
Telephone: 0967025996
Price range: $$$
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet">
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

	<title>AngularJS for beginner</title>
</head>
<body ng-controller="MyController">
<div class="container">
	<h1 class="text-center">{{ title }} {{ 4 + 5 }}</h1>
	<h4 class="text-center">{{ title }} - {{ 10/2 }}</h4>
	<div class="card mt-3">
		<div class="card-header bg-info text-white">
			CONTACT US
		</div>
		<div class="card-body">
			<form method="post" ng-submit="saveData()">
				<div class="form-group mb-3">
					<label>Full Name: </label>
					<input required type="text" name="fullname" class="form-control" placeholder="Enter fullnane" ng-model="fname">
				</div>
				<div class="form-group mb-3">
					<label>Email: </label>
					<input required type="email" name="email" class="form-control" placeholder="Enter email" ng-model="email">
				</div>
				<div class="form-group mb-3">
					<label>Phone Number: </label>
					<input required type="telno" name="phone" class="form-control" placeholder="Enter phone" ng-model="phone">
				</div>
				<div class="form-group mb-3">
					<label>Subject: </label>
					<input required type="text" name="subject" class="form-control" placeholder="Enter subject" ng-model="subject">
				</div>
				<div class="form-group mb-3">
					<label>Message: </label>
					<textarea required rows="5" class="form-control" ng-model="msg"></textarea>
				</div>
				<div class="form-group mb-3">
					<button class="btn btn-success">Save Data</button>
					<button class="btn btn-warning" type="button">Reset Form</button>
				</div>
			</form>
		</div>
	</div>

	<div class="card mt-3">
		<div class="card-header bg-warning text-white">
			CONTACT MANAGEMENT
		</div>
		<div class="card-body">
			<table class="table table-bordered table-hover">
				<thead>
					<tr>
						<th>STT</th>
						<th>Full Name</th>
						<th>Email</th>
						<th>Phone</th>
						<th>Subject</th>
						<th>Message</th>
						<th style="width: 50px;"></th>
						<th style="width: 50px;"></th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>1</td>
						<td>{{ feedback.fullname }}</td>
						<td>{{ feedback.email }}</td>
						<td>{{ feedback.phone }}</td>
						<td>{{ feedback.subject }}</td>
						<td>{{ feedback.message }}</td>
						<td>
							<button class="btn btn-warning">Edit</button>
						</td>
						<td>
							<button class="btn btn-danger">Delete</button>
						</td>
					</tr>

					<tr>
						<td>2</td>
						<td>{{ fname }}</td>
						<td>{{ email }}</td>
						<td>{{ phone }}</td>
						<td>{{ subject }}</td>
						<td>{{ msg }}</td>
						<td>
							<button class="btn btn-warning">Edit</button>
						</td>
						<td>
							<button class="btn btn-danger">Delete</button>
						</td>
					</tr>
				</tbody>
			</table>

			<table class="table table-bordered table-hover mt-3">
				<thead>
					<tr>
						<th>STT</th>
						<th>Full Name</th>
						<th>Email</th>
						<th>Phone</th>
						<th>Subject</th>
						<th>Message</th>
						<th style="width: 50px;"></th>
						<th style="width: 50px;"></th>
					</tr>
				</thead>
				<tbody>
					<tr ng-repeat="item in feedbackList">
						<td>{{ $index + 1 }}</td>
						<td>{{ item.fullname }}</td>
						<td>{{ item.email }}</td>
						<td>{{ item.phone }}</td>
						<td>{{ item.subject }}</td>
						<td>{{ item.message }}</td>
						<td>
							<button class="btn btn-warning">Edit</button>
						</td>
						<td>
							<button class="btn btn-danger">Delete</button>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
</div>

<script type="text/javascript">
	var app = angular.module('MyApp', [])
	app.controller('MyController', ['$scope', function ($scope) {
		//Noi code model <-> binding view <-> controller
		$scope.title = "AngularJS for beginer"
		$scope.feedback = {
			"fullname": "TRAN VAN A",
			"email": "a@gmail.com",
			"phone": "12313123",
			"subject": "Xin chao",
			"message": "ABC"
		}

		$scope.feedbackList = [
			{
				"fullname": "TRAN VAN B",
				"email": "a@gmail.com",
				"phone": "12313123",
				"subject": "Xin chao",
				"message": "ABC"
			}, {
				"fullname": "TRAN VAN C",
				"email": "a@gmail.com",
				"phone": "12313123",
				"subject": "Xin chao",
				"message": "ABC"
			}
		]

		$scope.saveData = function() {
			var data = {
				"fullname": $scope.fname,
				"email": $scope.email,
				"phone": $scope.phone,
				"subject": $scope.subject,
				"message": $scope.msg
			}
			console.log(data)
		}
	}])
</script>
</body>
</html>
[Source Code] Tìm hiểu về AngularJS - Directive - C2206L

#vidu.html

Tags:

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

5

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

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