AngularJS ng-submit พร้อมตัวอย่างการส่งแบบฟอร์ม

โดย: เจมส์ ฮาร์ทแมน เจมส์ ฮาร์ทแมน
Hours วันที่อัพเดท

สั่งส่ง AngularJS ng

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

วิธีส่งแบบฟอร์มใน AngularJS โดยใช้ ng-submit

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

มาดูตัวอย่างการส่งแบบฟอร์มเชิงมุมเพื่อดูวิธีการส่งแบบฟอร์มใน AngularJS

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

ส่งแบบฟอร์มใน AngularJS โดยใช้ ng-submit
การส่งแบบฟอร์มใน AngularJS โดยใช้ ng-submit

ตัวอย่างการส่งแบบฟอร์ม 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()">
        &nbsp;&nbsp;&nbsp;
        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>

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

  1. ขั้นแรก เราจะประกาศแท็ก HTML ของฟอร์ม ซึ่งจะเก็บตัวควบคุม “กล่องข้อความ” และ “ปุ่มส่ง” ตามที่แสดงในตัวอย่างเหตุการณ์ส่งฟอร์มของ Angular จากนั้น เราจะใช้ไดเรกทิฟ Angular ngsubmit เพื่อเชื่อมโยงฟังก์ชัน “Display()” กับฟอร์มของเรา ฟังก์ชันนี้จะถูกกำหนดในตัวควบคุมของเราและจะถูกเรียกใช้เมื่อส่งฟอร์ม
  2. เรามีการควบคุมข้อความที่ผู้ใช้จะเข้าสู่หัวข้อที่พวกเขาต้องการเรียนรู้ สิ่งนี้จะถูกผูกไว้กับตัวแปรที่เรียกว่า 'หัวข้อ' ซึ่งจะใช้ในคอนโทรลเลอร์ของเรา
  3. มีปุ่มส่งปกติใน AngularJS ซึ่งผู้ใช้จะคลิกเมื่อเข้าสู่หัวข้อที่ต้องการ
  4. เราใช้ ng-ซ้ำ คำสั่งเพื่อแสดงรายการของหัวข้อที่ผู้ใช้ป้อน คำสั่ง ng-repeat จะผ่านแต่ละหัวข้อในอาร์เรย์ 'AllTopic' และแสดงชื่อหัวข้อตามลำดับ
  5. ในคอนโทรลเลอร์ของเรา เรากำลังประกาศตัวแปรอาร์เรย์ที่เรียกว่า 'AllTopic' สิ่งนี้จะถูกใช้เพื่อเก็บหัวข้อทั้งหมดที่ผู้ใช้ป้อนในขั้นตอนที่ 2
  6. เรากำลังกำหนดโค้ดสำหรับฟังก์ชัน Display() ของเรา ซึ่งจะถูกเรียกเมื่อใดก็ตามที่ผู้ใช้คลิกปุ่มส่ง ตรงนี้ เราใช้ฟังก์ชันพุชอาเรย์เพื่อเพิ่มหัวข้อที่ผู้ใช้ป้อนผ่านตัวแปร 'หัวข้อ' ลงในอาร์เรย์ 'AllTopic' ของเรา

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

ส่งแบบฟอร์มใน AngularJS

หากต้องการดูการทำงานของโค้ด ขั้นแรกให้ป้อนชื่อหัวข้อ เช่น “Angular” ตามที่แสดงด้านบนในกล่องข้อความ จากนั้นคลิกที่ปุ่มส่ง

ส่งแบบฟอร์มใน AngularJS

  • หลังจากที่คลิกปุ่มส่ง คุณจะเห็นรายการที่ป้อนในกล่องข้อความถูกเพิ่มไปยังรายการรายการ
  • สิ่งนี้สามารถทำได้โดยฟังก์ชัน Display() ซึ่งถูกเรียกเมื่อกดปุ่มส่ง
  • ฟังก์ชัน Display() จะเพิ่มข้อความลงในตัวแปรอาร์เรย์ที่เรียกว่า 'AllTopic' และคำสั่ง ng-repeat ของเราจะผ่านแต่ละค่าในตัวแปรอาร์เรย์ 'AllTopic' และแสดงเป็นรายการตามลำดับ

สรุป

  • คำสั่ง “ng-submit” ใช้เพื่อประมวลผลอินพุตที่ผู้ใช้ป้อนเพื่อส่งแบบฟอร์มใน AngularJS
  • โดยปกติกระบวนการส่งข้อมูลบนเว็บเพจจะได้รับการจัดการโดยเหตุการณ์การส่งบนเว็บเบราว์เซอร์
  • การส่งข้อมูลสามารถทำได้ผ่านคำขอ GET หรือ POST
  • ฟังก์ชัน Display() จะเพิ่มข้อความลงในตัวแปรอาร์เรย์ที่เรียกว่า 'AllTopic'