[AngularJS] Xây dựng một trang đơn giản với chỉ thị ng-init và ng-repeat

Trong ví dụ này, chúng ta sẽ làm quen với hai chỉ thị mới là ng-init và ng-repeat thông qua một ví dụ đơn giản.

  • Chỉ thị ng-init được sử dụng để khởi tạo giá trị ban đầu cho ứng dụng.
  • Chỉ thị ng-repeat được sử dụng để lặp qua các dữ liệu được lưu trữ trong một collection.

Tạo trang index.html với nội dung như bên dưới:

<html>
	<head>
		<title>T02</title>
		<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
	</head>
	<body ng-app="">
		<ul>
			<li>
			</li>
		</ul>
	</body>
</html>

Sử dụng chỉ thị ng-init để khởi tạo giá trị ban đầu cho ứng dụng.

<html>
	<head>
		<title>T02</title>
		<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
	</head>
	<body ng-app="">>
		<ul ng-init="lecturers = [  
                     	{name: Huong Hoang Luong', age: 30, gender: 'Male'},  
                     	{name: 'Nhung Mai Thi Cam', age: 27, gender: 'Female'},  
                     	{name: 'Nghi Cong Tran', age: 27, gender: 'Male'},  
                     	{name: 'Trung Phuoc Le', age: 25, gender: 'Male'}  ]"
        >
			<li></li>
		</ul>
	</body>
</html>

Sử dụng ng-repeat để hiển thị dữ liệu:

<html>
	<head>
		<title>T02</title>
		<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
	</head>
	<body ng-app="">>
		<ul ng-init="lecturers = [  
                     	{name: 'Luong Hoang Huong', age: 30, gender: 'Male'},  
                     	{name: 'Mai Thi Cam Nhung', age: 27, gender: 'Female'},  
                     	{name: 'Tran Cong Nghi', age: 27, gender: 'Male'},  
                     	{name: 'Le Phuoc Trung', age: 25, gender: 'Male'}  ]"
        >
			<li ng-repeat="obj in lecturers">
				Name: {{obj.name}}, Age {{obj.age}}, Gender: {{obj.gender}}
			</li>
		</ul>
	</body>
</html>

Chạy trang index.html và kiểm tra kết quả.

Bình luận về bài viết này

Blog tại WordPress.com.

Up ↑