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)
