By GokiSoft.com| 09:37 11/02/2022|
AngularJS

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

Quản lý sinh viên - AngularJS


#index.html


<!DOCTYPE html>
<html ng-app="MyApp">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Quan Ly Sinh Vien - Page</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">
	<div class="card">
		<div class="card-heading bg-info" style="padding: 15px; font-weight: bold; color: white; text-transform: uppercase;">
			Nhap Thong Tin Sinh Vien
		</div>
		<div class="card-body">
			<form>
				<div class="form-group mt-2">
					<label>Full Name: </label>
					<input type="text" name="fullname" class="form-control" ng-model="fullname">
				</div>
				<div class="form-group mt-2">
					<label>Age: </label>
					<input type="number" name="age" class="form-control" ng-model="age">
				</div>
				<div class="form-group mt-2">
					<label>Address: </label>
					<input type="text" name="address" class="form-control" ng-model="address">
				</div>
				<div class="form-group mt-2">
					<button class="btn btn-success" ng-click="addUser()">Save</button>
					<button class="btn btn-warning" type="reset">Reset</button>
				</div>
			</form>
		</div>
	</div>
</div>

<div class="container mt-3">
	<div class="card">
		<div class="card-heading bg-info" style="padding: 15px; font-weight: bold; color: white; text-transform: uppercase;">
			Quan Ly Thong Tin Sinh Vien
		</div>
		<div class="card-body">
			<table class="table table-bordered">
				<thead>
					<th style="width: 50px">No</th>
					<th>Full Name</th>
					<th>Age</th>
					<th>Address</th>
					<th style="width: 160px"></th>
				</thead>
				<tbody>
					<tr ng-repeat="std in studentList track by $index">
						<td>{{ $index + 1 }}</td>
						<td>{{ std.fullname }}</td>
						<td>{{ std.age }}</td>
						<td>{{ std.address }}</td>
						<td>
							<button class="btn btn-warning" ng-click="editStudent($index)">Edit</button>
							<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) {
		$scope.studentList = []
		$scope.fullname = ''
		$scope.age = ''
		$scope.address = ''
		$scope.currentIndex = -1

		$scope.addUser = function() {
			var newStd = {
				'fullname': $scope.fullname,
				'age': $scope.age,
				'address': $scope.address
			}

			if($scope.currentIndex >= 0) {
				$scope.studentList[$scope.currentIndex] = newStd
				$scope.currentIndex = -1
			} else {
				$scope.studentList.push(newStd)
			}

			$scope.fullname = ''
			$scope.age = ''
			$scope.address = ''
		}

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

		$scope.removeStudent = function(index) {
			var option = confirm('Are you sure to remove this 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 đó