AngularJS ng-submit พร้อมตัวอย่างการส่งแบบฟอร์ม
เจมส์ ฮาร์ทแมน
สั่งส่ง AngularJS ng
เค้ก ng-ส่ง คำสั่งใน AngularJS ใช้เพื่อผูกแอปพลิเคชันกับเหตุการณ์การส่งของเบราว์เซอร์ ดังนั้นในกรณีของ AngularJS ในเหตุการณ์การส่ง คุณสามารถดำเนินการประมวลผลบางอย่างภายในตัวควบคุมได้ จากนั้นจึงแสดงข้อมูลที่ประมวลผลแก่ผู้ใช้
วิธีส่งแบบฟอร์มใน AngularJS โดยใช้ ng-submit
โดยปกติกระบวนการส่งข้อมูลบนเว็บเพจจะได้รับการจัดการโดยเหตุการณ์การส่งบนเว็บเบราว์เซอร์ โดยปกติเหตุการณ์นี้ใช้เพื่อส่งข้อมูลที่ผู้ใช้อาจป้อนบนหน้าเว็บไปยังเซิร์ฟเวอร์เพื่อการประมวลผลเพิ่มเติม เช่น ข้อมูลการเข้าสู่ระบบ ข้อมูลแบบฟอร์ม ฯลฯ การส่งข้อมูลสามารถทำได้ผ่านคำขอ GET หรือ POST
มาดูตัวอย่างการส่งแบบฟอร์มเชิงมุมเพื่อดูวิธีการส่งแบบฟอร์มใน AngularJS
ในตัวอย่างการส่งแบบฟอร์ม AngularJS ของเรา เราจะนำเสนอกล่องข้อความให้ผู้ใช้ป้อนหัวข้อที่ต้องการเรียนรู้ จะมีปุ่มส่งอยู่ในหน้า เมื่อกดแล้ว หัวข้อนั้นจะเพิ่มลงในรายการแบบไม่เรียงลำดับ
ตัวอย่างการส่งแบบฟอร์ม AngularJS
ตอนนี้เราจะเห็นตัวอย่างของการส่งแบบฟอร์ม AngularJS จาก Controller โดยใช้คำสั่ง ng-submit:
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body ng-app="sampleApp">
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>
<h1> Guru99 Global Event</h1>
<div ng-controller="AngularController">
<form ng-submit="Display()">
Enter which topic you would like to learn
<input type="text" ng-app="sampleApp" ng-model="Topic"><br>
<input type="submit" value="Submit"/>
<ul ng-repeat="topicname in AllTopic">
<li>{{topicname}}</li>
</ul>
</form>
</div>
<script>
var sampleApp = angular.module("sampleApp",[]);
sampleApp.controller("AngularController",function($scope) {
$scope.AllTopic=[];
$scope.Display = function () {
$scope.AllTopic.push($scope.Topic);
}
});
</script>
</body>
</html>
คำอธิบายรหัส:
- ขั้นแรก เราจะประกาศแท็ก HTML ของฟอร์ม ซึ่งจะเก็บตัวควบคุม “กล่องข้อความ” และ “ปุ่มส่ง” ตามที่แสดงในตัวอย่างเหตุการณ์ส่งฟอร์มของ Angular จากนั้น เราจะใช้ไดเรกทิฟ Angular ngsubmit เพื่อเชื่อมโยงฟังก์ชัน “Display()” กับฟอร์มของเรา ฟังก์ชันนี้จะถูกกำหนดในตัวควบคุมของเราและจะถูกเรียกใช้เมื่อส่งฟอร์ม
- เรามีการควบคุมข้อความที่ผู้ใช้จะเข้าสู่หัวข้อที่พวกเขาต้องการเรียนรู้ สิ่งนี้จะถูกผูกไว้กับตัวแปรที่เรียกว่า 'หัวข้อ' ซึ่งจะใช้ในคอนโทรลเลอร์ของเรา
- มีปุ่มส่งปกติใน AngularJS ซึ่งผู้ใช้จะคลิกเมื่อเข้าสู่หัวข้อที่ต้องการ
- เราใช้ ng-ซ้ำ คำสั่งเพื่อแสดงรายการของหัวข้อที่ผู้ใช้ป้อน คำสั่ง ng-repeat จะผ่านแต่ละหัวข้อในอาร์เรย์ 'AllTopic' และแสดงชื่อหัวข้อตามลำดับ
- ในคอนโทรลเลอร์ของเรา เรากำลังประกาศตัวแปรอาร์เรย์ที่เรียกว่า 'AllTopic' สิ่งนี้จะถูกใช้เพื่อเก็บหัวข้อทั้งหมดที่ผู้ใช้ป้อนในขั้นตอนที่ 2
- เรากำลังกำหนดโค้ดสำหรับฟังก์ชัน Display() ของเรา ซึ่งจะถูกเรียกเมื่อใดก็ตามที่ผู้ใช้คลิกปุ่มส่ง ตรงนี้ เราใช้ฟังก์ชันพุชอาเรย์เพื่อเพิ่มหัวข้อที่ผู้ใช้ป้อนผ่านตัวแปร 'หัวข้อ' ลงในอาร์เรย์ 'AllTopic' ของเรา
หากดำเนินการโค้ดตัวอย่างแบบฟอร์ม AngularJS สำเร็จ ผลลัพธ์ต่อไปนี้จะปรากฏขึ้นเมื่อคุณรันโค้ดในเบราว์เซอร์
Output:
หากต้องการดูการทำงานของโค้ด ขั้นแรกให้ป้อนชื่อหัวข้อ เช่น “Angular” ตามที่แสดงด้านบนในกล่องข้อความ จากนั้นคลิกที่ปุ่มส่ง
- หลังจากที่คลิกปุ่มส่ง คุณจะเห็นรายการที่ป้อนในกล่องข้อความถูกเพิ่มไปยังรายการรายการ
- สิ่งนี้สามารถทำได้โดยฟังก์ชัน Display() ซึ่งถูกเรียกเมื่อกดปุ่มส่ง
- ฟังก์ชัน Display() จะเพิ่มข้อความลงในตัวแปรอาร์เรย์ที่เรียกว่า 'AllTopic' และคำสั่ง ng-repeat ของเราจะผ่านแต่ละค่าในตัวแปรอาร์เรย์ 'AllTopic' และแสดงเป็นรายการตามลำดับ
สรุป
- คำสั่ง “ng-submit” ใช้เพื่อประมวลผลอินพุตที่ผู้ใช้ป้อนเพื่อส่งแบบฟอร์มใน AngularJS
- โดยปกติกระบวนการส่งข้อมูลบนเว็บเพจจะได้รับการจัดการโดยเหตุการณ์การส่งบนเว็บเบราว์เซอร์
- การส่งข้อมูลสามารถทำได้ผ่านคำขอ GET หรือ POST
- ฟังก์ชัน Display() จะเพิ่มข้อความลงในตัวแปรอาร์เรย์ที่เรียกว่า 'AllTopic'