By GokiSoft.com| 20:18 17/12/2021|
AngularJS

[Video] Bài tập - Hiển thị mảng sinh viên ra table - Lập trình AngularJS - C2108L 



<!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.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>
</head>
<body ng-controller="MyController">
<div class="container">
	<table class="table table-bordered table-hover">
		<thead>
			<tr class="bg-info text-white">
				<th>STT</th>
				<th>Ten</th>
				<th>Tuoi</th>
				<th>Dia Chi</th>
				<th>Email</th>
			</tr>
		</thead>
		<tbody>
			<tr ng-repeat="item in studentList">
				<th>{{ $index + 1 }}</th>
				<td>{{ item.fullname }}</td>
				<td>{{ item.age }}</td>
				<td>{{ item.address }}</td>
				<td>{{ item.email }}</td>
			</tr>
		</tbody>
	</table>
</div>
<script type="text/javascript">
	var app = angular.module('MyApp', []);
	app.controller('MyController', ['$scope', function ($scope) {
		//Khoi tao du lieu mau
		$scope.studentList = []
		for (var i = 0; i < 20; i++) {
			var std = {
				'fullname': 'Ten ' + i,
				'age': i,
				'address': 'Dia Chi ' + i,
				'email': i + '@gmail.com'
			}
			$scope.studentList.push(std)
		}
		// console.log($scope.studentList)
	}])
</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)