By GokiSoft.com|
10:35 09/02/2022|
AngularJS
[Video] Bài tập - Hiển thị mảng sinh viên ra table - Lập trình AngularJS - C2108G3
Bài tập - Hiển thị mảng sinh viên ra table - Lập trình 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>Sinh ngau nhien N sinh vien</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">
<table class="table table-bordered">
<thead>
<tr>
<th>No</th>
<th>Full Name</th>
<th>Age</th>
<th>Address</th>
<th>Email</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>{{ item.email }}</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
var app = angular.module('MyApp', [])
app.controller('MyController', ['$scope', function ($scope) {
//Khai bao mang rong
$scope.studentList = []
//Sinh ra 20 sinh vien ngau nhien
for (var i = 0; i < 20; i++) {
$scope.studentList.push({
'fullname': 'Tran Van ' + i,
'age': 18 + i,
'address': 'Dia Chi ' + i,
'email': i + '@gmail.com'
})
}
}])
</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)
