By GokiSoft.com| 21:48 20/12/2021|
AngularJS

[Video] Quản lý sinh viên - AngularJS - C2108L

Quản lý sinh viên - AngularJS



<!DOCTYPE html>
<html ng-app="MyApp">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Student Management Page</title>
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
  	<!-- B1. Them thu vien cua AngularJS -->
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

	<style type="text/css">
		.card-body .form-group {
			margin-bottom: 15px;
		}

		.card-body .form-group label{
			font-weight: bold;
		}
	</style>
</head>
<body ng-controller="MyController">
	<div class="container">
		<div class="card">
			<div class="card-heading bg-info pb-2 pt-2" style="padding-left: 20px; font-weight: bold; font-size: 18px; color: white">
				Input Student's Detail Information
			</div>
			<div class="card-body">
				<div class="form-group">
					<label>Full Name: </label>
					<input type="text" name="fullname" placeholder="Enter fullname" class="form-control" ng-model="editUser.fullname">
				</div>
				<div class="form-group">
					<label>Age: </label>
					<input type="text" name="age" placeholder="Enter age" class="form-control" ng-model="editUser.age">
				</div>
				<div class="form-group">
					<label>Address: </label>
					<input type="text" name="address" placeholder="Enter address" class="form-control" ng-model="editUser.address">
				</div>
				<button class="btn btn-success" ng-click="saveUser()">Save</button>
				<button class="btn btn-warning" ng-click="resetUser()">Reset</button>
			</div>
		</div>

		<div class="card" style="margin-top: 30px">
			<div class="card-heading bg-info pb-2 pt-2" style="padding-left: 20px; font-weight: bold; font-size: 18px; color: white">
				Student's Information Management
			</div>
			<div class="card-body">
				<table class="table table-bordered">
					<thead>
						<tr>
							<th>No</th>
							<th>Full Name</th>
							<th>Age</th>
							<th>Address</th>
							<th style="width: 50px"></th>
							<th style="width: 50px"></th>
						</tr>
					</thead>
					<tbody>
						<tr ng-repeat="item in studentList">
							<td>{{ $index + 1 }}</td>
							<td>{{ item.fullname }}</td>
							<td>{{ item.age }}</td>
							<td>{{ item.address }}</td>
							<td style="width: 50px">
								<button class="btn btn-warning" ng-click="updateStudent($index)">Edit</button>
							</td>
							<td style="width: 50px">
								<button class="btn btn-danger" ng-click="removeStudent($index)">Remove</button>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>

<script type="text/javascript">
	var app = angular. module('MyApp', [])
	app. controller('MyController', ['$scope', function ($scope) {
		// index: 0 -> length - 1
		$scope.studentList = []
		$scope.currentIndex = -1
		$scope.editUser = {
			'fullname': '',
			'age': '',
			'address': ''
		}

		$scope.resetUser = function() {
			$scope.editUser.fullname = ''
			$scope.editUser.age = ''
			$scope.editUser.address = ''
		}

		$scope.saveUser = function() {
			if($scope.editUser.fullname == '') {
				return alert('Let\'s input student\' detail information, plz!!!')
			}
			if($scope.currentIndex >= 0) {
				$scope.studentList[$scope.currentIndex].fullname = $scope.editUser.fullname
				$scope.studentList[$scope.currentIndex].age = $scope.editUser.age
				$scope.studentList[$scope.currentIndex].address = $scope.editUser.address
				$scope.currentIndex = -1
				return
			}
			$scope.studentList.push({
				'fullname': $scope.editUser.fullname,
				'age': $scope.editUser.age,
				'address': $scope.editUser.address
			})
		}

		$scope.updateStudent = function(index) {
			$scope.currentIndex = index
			$scope.editUser.fullname = $scope.studentList[index].fullname
			$scope.editUser.age = $scope.studentList[index].age
			$scope.editUser.address = $scope.studentList[index].address
		}

		$scope.removeStudent = function(index) {
			var option = confirm('Are you sure to remove the student?')
			if(!option) return
			$scope.studentList.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 đó