By GokiSoft.com| 11:24 16/09/2022|
AngularJS

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


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>
	<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>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>

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

<div ng-view></div>

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

  app.config(function($routeProvider) {
      $routeProvider
      .when("/", {
          templateUrl : "list.html",
          controller: "ListController"
      })
      .when("/list", {
          templateUrl : "list.html",
          controller: "ListController"
      })
      .when("/input", {
          templateUrl : "input.html",
          controller: "InputController"
      });
  });

  app.service('dataMgr', [function () {
  	this.studentList = [
  		{
  			"fullname": "TRAN VAN A",
  			"age": 20,
  			"address": "Ha Noi"
  		}, {
  			"fullname": "TRAN VAN B",
  			"age": 22,
  			"address": "Nam Dinh"
  		}
  	]

  }])

  app.controller('InputController', ['$scope', 'dataMgr', function ($scope, dataMgr) {
  	$scope.saveData = function() {
  		var std = {
  			"fullname": $scope.fullname,
  			"age": $scope.age,
  			"address": $scope.address
  		}

  		$scope.fullname = ""
  		$scope.age = ""
  		$scope.address = ""

  		dataMgr.studentList.push(std)
  		console.log(dataMgr.studentList)
  	}
  }])

  app.controller('ListController', ['$scope', 'dataMgr', function ($scope, dataMgr) {
  	$scope.studentList = dataMgr.studentList

  	$scope.deleteItem = function(index) {
  		var option = confirm("Are you sure to delete this item?")
  		if(!option) return

  		$scope.studentList.splice(index, 1)
  	}
  }])
</script>
</body>
</html>


#input.html


<div class="container" ng-controller="InputController">
	<form method="post" ng-submit="saveData()">
		<div class="form-group">
			<label>Full Name</label>
			<input type="text" name="fullname" class="form-control" ng-model="fullname">
		</div>
		<div class="form-group">
			<label>Age</label>
			<input type="number" name="age" class="form-control" ng-model="age">
		</div>
		<div class="form-group">
			<label>Address</label>
			<input type="text" name="address" class="form-control" ng-model="address">
		</div>
		<div class="form-group">
			<button class="btn btn-success">Save Student</button>
			<a href="#!list">Back to list</a>
		</div>
	</form>
</div>


#list.html


<div class="container" ng-controller="ListController">
	<a href="#!input"><button class="btn btn-success mb-3">Add a new student</button></a>
	<table class="table table-bordered">
		<thead>
			<tr>
				<th>No</th>
				<th>Full Name</th>
				<th>Age</th>
				<th>Address</th>
				<th style="width: 60px"></th>
				<th style="width: 60px"></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>
					<button class="btn btn-warning">Edit</button>
				</td>
				<td>
					<button class="btn btn-danger" ng-click="deleteItem($index)">Delete</button>
				</td>
			</tr>
		</tbody>
	</table>
</div>


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 đó