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

#index.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">
	<title>Quan Ly Sinh Vien - AngularJS</title>
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet">
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

	<style type="text/css">
		.form-group {
			margin-bottom: 20px;
		}
	</style>
</head>
<body ng-controller="MyController">
<div class="container">
	<div class="card">
		<div class="card-header bg-info">
			NHAP THONG TIN SINH VIEN
		</div>
		<div class="card-body">
			<form method="post" ng-submit="saveData()">
				<div class="form-group">
					<label>Ho & Ten: </label>
					<input required type="text" name="fullname" class="form-control" ng-model="fullname">
				</div>
				<div class="form-group">
					<label>Ngay Sinh: </label>
					<input required type="date" name="birthday" class="form-control" ng-model="birthday">
				</div>
				<div class="form-group">
					<label>Email: </label>
					<input required type="email" name="email" class="form-control" ng-model="email">
				</div>
				<div class="form-group">
					<label>Dia Chi: </label>
					<input type="text" name="address" class="form-control" ng-model="address">
				</div>
				<div class="form-group">
					<button class="btn btn-success">Luu Du Lieu</button>
					<button class="btn btn-warning" type="button" ng-click="resetData()">Xoa Form</button>
				</div>
			</form>
		</div>
	</div>

	<div class="card mt-3">
		<div class="card-header bg-info">
			DANH SACH SINH VIEN
		</div>
		<div class="card-body">
			<input type="text" name="s" class="form-control mb-3" placeholder="Nhập tìm kiếm ...	" style="width: 260px; float: right;" ng-model="s">
			<table class="table table-bordered">
				<thead>
					<tr>
						<th style="width: 40px">STT</th>
						<th>Ho & Ten</th>
						<th>Ngay Sinh</th>
						<th>Email</th>
						<th>Dia Chi</th>
						<th style="width: 50px"></th>
						<th style="width: 50px"></th>
					</tr>
				</thead>
				<tbody>
					<tr ng-repeat="item in dataList | filter:s">
						<td>{{ $index + 1 }}</td>
						<td>{{ item.fullname }}</td>
						<td>{{ item.birthday }}</td>
						<td>{{ item.email }}</td>
						<td>{{ item.address }}</td>
						<td>
							<button class="btn btn-warning" ng-click="editItem($index)">Sua</button>
						</td>
						<td>
							<button class="btn btn-danger" ng-click="deleteItem($index)">Xoa</button>
						</td>
					</tr>
				</tbody>
			</table>

			<h2>Tim kiem theo TEN & EMAIL</h2>
			<table class="table table-bordered">
				<thead>
					<tr>
						<th style="width: 40px">STT</th>
						<th>Ho & Ten</th>
						<th>Ngay Sinh</th>
						<th>Email</th>
						<th>Dia Chi</th>
						<th style="width: 50px"></th>
						<th style="width: 50px"></th>
					</tr>
				</thead>
				<tbody>
					<tr ng-repeat="item in dataList | searchData:s">
						<td>{{ $index + 1 }}</td>
						<td>{{ item.fullname }}</td>
						<td>{{ item.birthday }}</td>
						<td>{{ item.email }}</td>
						<td>{{ item.address }}</td>
						<td>
							<button class="btn btn-warning" ng-click="editItem($index)">Sua</button>
						</td>
						<td>
							<button class="btn btn-danger" ng-click="deleteItem($index)">Xoa</button>
						</td>
					</tr>
				</tbody>
			</table>

		</div>
	</div>
</div>

<script type="text/javascript">
	var app = angular.module('MyApp', [])

	app.filter('searchData', function() {
		return function(items, s) {
			if(s == null || s == "" || s == undefined) {
				return items
			}

			newItems = []

			s = s.toLowerCase()
			for(var item of items) {
				if(item.fullname.toLowerCase().includes(s) || item.email.toLowerCase().includes(s)) {
					newItems.push(item)
				}
			}
			
			return newItems;
		}
	})

	app.controller('MyController', ['$scope', function ($scope) {
		$scope.fullname = ""
		$scope.email = ""
		$scope.birthday = ""
		$scope.address = ""
		$scope.currentIndex = -1

		$scope.dataList = []

		$scope.saveData = function() {
			var std = {
				'fullname': $scope.fullname,
				'email': $scope.email,
				'birthday': $scope.birthday,
				'address': $scope.address
			}

			if($scope.currentIndex >= 0) {
				$scope.dataList[$scope.currentIndex] = std
			} else {
				$scope.dataList.push(std)
			}
			

			return false
		}

		$scope.deleteItem = function(index) {
			var option = confirm('Ban co chac chan xoa sinh vien nay khong?')
			if(!option) return

			$scope.dataList.splice(index, 1)
		}

		$scope.resetData = function() {
			$scope.fullname = ""
			$scope.email = ""
			$scope.birthday = ""
			$scope.address = ""
			$scope.currentIndex = -1
		}

		$scope.editItem = function(index) {
			// console.log($scope.dataList[index])
			$scope.currentIndex = index
			$scope.fullname = $scope.dataList[index].fullname
			$scope.birthday = $scope.dataList[index].birthday
			$scope.email = $scope.dataList[index].email
			$scope.address = $scope.dataList[index].address

			// console.log($scope.fullname)
			// console.log($scope.birthday)
			// console.log($scope.email)
			// console.log($scope.address)
		}
	}])
</script>
</body>
</html>
[Video] Quản lý sinh viên - AngularJS - C2010G

#index.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 đó
