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>
Code คำอธิบาย:
- ในคอนโทรลเลอร์ ก่อนอื่นเราจะกำหนดอาร์เรย์ของรายการที่เราต้องการกำหนดในมุมมอง ตรงนี้เราได้กำหนดอาร์เรย์ชื่อ "หัวข้อชื่อ" ซึ่งมีสามรายการ แต่ละรายการประกอบด้วยคู่ชื่อ-ค่า
- จากนั้นอาร์เรย์ของ TopicsNames จะถูกเพิ่มเข้าไปในตัวแปรสมาชิกที่เรียกว่า "หัวข้อ" และแนบไปกับวัตถุขอบเขตของเรา
- เรากำลังใช้แท็ก HTML ของ (รายการไม่เรียงลำดับ) และ (List Item) เพื่อแสดงรายการในอาร์เรย์ของเรา จากนั้นเราใช้คำสั่ง ng-repeat เพื่ออ่านแต่ละรายการในอาร์เรย์ของเรา คำว่า “tpname” เป็นตัวแปรที่ใช้ชี้ไปยังแต่ละรายการในหัวข้ออาร์เรย์ชื่อหัวข้อ
- ในที่นี้เราจะแสดงค่าของแต่ละรายการในอาร์เรย์
หากโค้ดถูกดำเนินการสำเร็จ ผลลัพธ์ต่อไปนี้จะปรากฏขึ้นเมื่อคุณรันโค้ดในเบราว์เซอร์ คุณจะเห็นรายการทั้งหมดของอาร์เรย์ (โดยทั่วไปคือ TopicNames ในหัวข้อ) ที่แสดงอยู่
Output:
ตัวควบคุมหลายตัวของ AngularJS
ตัวอย่างคอนโทรลเลอร์ขั้นสูงคือแนวคิดของการมีคอนโทรลเลอร์หลายตัวในแอปพลิเคชัน JS เชิงมุม
คุณอาจต้องการกำหนดคอนโทรลเลอร์หลายตัวเพื่อแยกฟังก์ชันตรรกะทางธุรกิจที่แตกต่างกัน ก่อนหน้านี้เราได้กล่าวถึงการมีเมธอดต่างๆ ในคอนโทรลเลอร์ โดยที่เมธอดหนึ่งมีฟังก์ชันการทำงานแยกต่างหากสำหรับการบวกและการลบtracการประมวลผลตัวเลข คุณสามารถใช้คอนโทรลเลอร์หลายตัวเพื่อแยกการทำงานของตรรกะได้อย่างมีประสิทธิภาพมากขึ้น ตัวอย่างเช่น คุณอาจมีคอนโทรลเลอร์ตัวหนึ่งที่ทำหน้าที่ประมวลผลตัวเลขเท่านั้น และอีกตัวหนึ่งที่ทำหน้าที่ประมวลผลสตริง
ลองดูตัวอย่างวิธีที่เราสามารถกำหนดตัวควบคุมหลายตัวในแอปพลิเคชัน 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>
Code คำอธิบาย:
- ที่นี่เรากำลังกำหนดคอนโทรลเลอร์ 2 ตัวที่เรียกว่า "firstController" และ "secondController" สำหรับคอนโทรลเลอร์แต่ละตัว เรายังเพิ่มโค้ดสำหรับการประมวลผลอีกด้วย ใน firstController ของเรา เราแนบตัวแปรชื่อ "pname" ซึ่งมีค่าเป็น "firstController" และใน SecondController เราแนบตัวแปรชื่อ "lname" ซึ่งมีค่าเป็น "secondController"
- ในมุมมอง เรากำลังเข้าถึงคอนโทรลเลอร์ทั้งสองและใช้ตัวแปรสมาชิกจากคอนโทรลเลอร์ตัวที่สอง
หากโค้ดถูกดำเนินการสำเร็จ ผลลัพธ์ต่อไปนี้จะปรากฏขึ้นเมื่อคุณรันโค้ดในเบราว์เซอร์ คุณจะเห็นข้อความทั้งหมดของ "secondController" ตามที่คาดไว้
Output:
สรุป
- คำสั่ง ng-repeat ใน AngularJS ใช้ในการแสดงรายการซ้ำหลายรายการ
- นอกจากนี้เรายังได้ดูตัวควบคุมขั้นสูงซึ่งดูคำจำกัดความของตัวควบคุมหลายตัวในแอปพลิเคชันด้วย
