AngularJS ng-ทำซ้ำคำสั่งพร้อมตัวอย่าง

คำสั่ง ng-repeat ใน AngularJS

เหตุการณ์ ng-ซ้ำ คำสั่งใน AngularJS ใช้เพื่อแสดงค่าซ้ำที่กำหนดในคอนโทรลเลอร์ บางครั้งเราต้องการแสดงรายการของรายการในมุมมอง คำสั่ง ng-repeat ช่วยให้เราแสดงรายการของรายการที่กำหนดไว้ในคอนโทรลเลอร์ไปยังหน้าดู

ตัวอย่างคำสั่ง AngularJS ng-repeat

ลองดูตัวอย่างคำสั่ง ng-repeat ใน AngularJS:

<!DOCTYPE html>
<html>
<head>
	<meta chrset="UTF 8">
	<title>Event Registration</title>
	<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body >
<h1> Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>

<div ng-app="DemoApp" ng-controller="DemoController">
<h1>Topics</h1>
<ul><li ng-repeat="tpname in TopicNames">
		{{tpname.name}}
		</li></ul>
</div>

<script> 
	var app = angular.module('DemoApp',[]);
	app.controller('DemoController', function($scope){

	$scope.TopicNames =[
		{name: "What controller do from Angular's perspective"},
		{name: "Controller Methods"},
		{name: "Building a basic controller"}];	
		});
</script>

</body>
</html>

คำอธิบายรหัส:

ในคอนโทรลเลอร์ ก่อนอื่นเราจะกำหนดอาร์เรย์ของรายการที่เราต้องการกำหนดในมุมมอง ตรงนี้เราได้กำหนดอาร์เรย์ชื่อ "หัวข้อชื่อ" ซึ่งมีสามรายการ แต่ละรายการประกอบด้วยคู่ชื่อ-ค่า
จากนั้นอาร์เรย์ของ TopicsNames จะถูกเพิ่มเข้าไปในตัวแปรสมาชิกที่เรียกว่า "หัวข้อ" และแนบไปกับวัตถุขอบเขตของเรา
เรากำลังใช้แท็ก HTML ของ (รายการไม่เรียงลำดับ) และ (List Item) เพื่อแสดงรายการในอาร์เรย์ของเรา จากนั้นเราใช้คำสั่ง ng-repeat เพื่ออ่านแต่ละรายการในอาร์เรย์ของเรา คำว่า “tpname” เป็นตัวแปรที่ใช้ชี้ไปยังแต่ละรายการในหัวข้ออาร์เรย์ชื่อหัวข้อ
ในที่นี้เราจะแสดงค่าของแต่ละรายการในอาร์เรย์

หากโค้ดถูกดำเนินการสำเร็จ ผลลัพธ์ต่อไปนี้จะปรากฏขึ้นเมื่อคุณรันโค้ดในเบราว์เซอร์ คุณจะเห็นรายการทั้งหมดของอาร์เรย์ (โดยทั่วไปคือ TopicNames ในหัวข้อ) ที่แสดงอยู่

Output:

ตัวควบคุมหลายตัวของ AngularJS

ตัวอย่างคอนโทรลเลอร์ขั้นสูงคือแนวคิดของการมีคอนโทรลเลอร์หลายตัวในแอปพลิเคชัน JS เชิงมุม

คุณอาจต้องการกำหนดตัวควบคุมหลายตัวเพื่อแยกฟังก์ชันลอจิกทางธุรกิจที่แตกต่างกัน ก่อนหน้านี้เราได้กล่าวถึงการมีวิธีการที่แตกต่างกันในตัวควบคุม โดยที่วิธีการหนึ่งมีฟังก์ชันการทำงานแยกต่างหากสำหรับการบวกและการลบตัวเลข คุณสามารถมีตัวควบคุมหลายตัวเพื่อแยกตรรกะขั้นสูงได้ ตัวอย่างเช่น คุณสามารถมีตัวควบคุมตัวหนึ่งที่ดำเนินการกับตัวเลขเท่านั้น และอีกตัวหนึ่งที่ดำเนินการกับสตริง

ลองดูตัวอย่างวิธีที่เราสามารถกำหนดตัวควบคุมหลายตัวในแอปพลิเคชัน angular.JS

<!DOCTYPE html>
<html>
<head>
	<meta chrset="UTF 8">
	<title>Event Registration</title>
	<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body >
<h1> Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>

<div ng-app="DemoApp">
	<div ng-controller="firstcontroller">
		<div ng-controller="secondcontroller">
		{{lname}}
		</div>
	</div>
</div>

<script>
	var app = angular.module('DemoApp',[]);
	app.controller('firstcontroller', function($scope){
		$scope.pname="firstcontroller";
			});
		app.controller('secondcontroller', function($scope){
			$scope.lname="secondcontroller";
			});
</script>
</body>
</html>

คำอธิบายรหัส:

ที่นี่เรากำลังกำหนดคอนโทรลเลอร์ 2 ตัวที่เรียกว่า "firstController" และ "secondController" สำหรับคอนโทรลเลอร์แต่ละตัว เรายังเพิ่มโค้ดสำหรับการประมวลผลอีกด้วย ใน firstController ของเรา เราแนบตัวแปรชื่อ "pname" ซึ่งมีค่าเป็น "firstController" และใน SecondController เราแนบตัวแปรชื่อ "lname" ซึ่งมีค่าเป็น "secondController"
ในมุมมอง เรากำลังเข้าถึงคอนโทรลเลอร์ทั้งสองและใช้ตัวแปรสมาชิกจากคอนโทรลเลอร์ตัวที่สอง

หากโค้ดถูกดำเนินการสำเร็จ ผลลัพธ์ต่อไปนี้จะปรากฏขึ้นเมื่อคุณรันโค้ดในเบราว์เซอร์ คุณจะเห็นข้อความทั้งหมดของ "secondController" ตามที่คาดไว้

Output:

สรุป

คำสั่ง ng-repeat ใน AngularJS ใช้ในการแสดงรายการซ้ำหลายรายการ
นอกจากนี้เรายังได้ดูตัวควบคุมขั้นสูงซึ่งดูคำจำกัดความของตัวควบคุมหลายตัวในแอปพลิเคชันด้วย

ที่คุณอาจชอบ: