AngularJS ng-submit với ví dụ gửi biểu mẫu

Chỉ thị ng-submit của AngularJS

ng-gửi chỉ thị trong AngularJS được sử dụng để liên kết ứng dụng với sự kiện gửi của trình duyệt. Vì vậy trong trường hợp AngularJS trong sự kiện gửi, bạn có thể thực hiện một số xử lý trong chính bộ điều khiển và sau đó hiển thị thông tin đã xử lý cho người dùng.

Cách gửi biểu mẫu trong AngularJS bằng ng-submit

Quá trình gửi thông tin trên một trang web thường được xử lý bởi sự kiện gửi trên trình duyệt web. Sự kiện này thường được sử dụng để gửi thông tin mà người dùng có thể đã nhập trên trang web tới máy chủ để xử lý thêm như thông tin xác thực đăng nhập, dữ liệu biểu mẫu, v.v. Việc gửi thông tin có thể được thực hiện thông qua yêu cầu GET hoặc POST.

Hãy lấy một ví dụ gửi biểu mẫu Angular để xem cách gửi biểu mẫu trong AngularJS.

Trong ví dụ về gửi biểu mẫu AngularJS của chúng tôi, chúng tôi sẽ trình bày một hộp văn bản cho người dùng để họ có thể nhập chủ đề mà họ muốn tìm hiểu. Sẽ có một nút gửi trên trang, khi nhấn vào sẽ thêm chủ đề vào danh sách không có thứ tự.

Gửi biểu mẫu trong AngularJS bằng ng-submit

Ví dụ gửi biểu mẫu AngularJS

Bây giờ, chúng ta sẽ xem một ví dụ về gửi biểu mẫu AngularJS từ Bộ điều khiển bằng cách sử dụng lệnh 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>

Giải thích mã:

Đầu tiên, chúng ta khai báo thẻ HTML form của mình, thẻ này sẽ chứa điều khiển “text box” và “submit button” như trong ví dụ sự kiện submit form Angular. Sau đó, chúng ta sử dụng chỉ thị ngsubmit Angular để liên kết hàm “Display()” với form của chúng ta. Hàm này sẽ được định nghĩa trong controller của chúng ta và sẽ được gọi khi form được submit.
Chúng tôi có một điều khiển văn bản trong đó người dùng sẽ nhập Chủ đề họ muốn tìm hiểu. Điều này sẽ được liên kết với một biến gọi là 'Chủ đề' sẽ được sử dụng trong bộ điều khiển của chúng tôi.
Có nút gửi thông thường trong AngularJS mà người dùng sẽ nhấp vào khi họ nhập chủ đề họ muốn.
Chúng tôi đã sử dụng ng-lặp lại chỉ thị hiển thị các mục danh sách của chủ đề mà người dùng nhập vào. Lệnh ng-repeat đi qua từng chủ đề trong mảng 'AllTopic' và hiển thị tên chủ đề tương ứng.
Trong bộ điều khiển của chúng tôi, chúng tôi đang khai báo một biến mảng có tên là 'AllTopic.' Điều này sẽ được sử dụng để chứa tất cả các chủ đề được người dùng nhập ở Bước 2.
Chúng tôi đang xác định mã cho hàm Display() sẽ được gọi bất cứ khi nào người dùng nhấp vào nút Gửi. Ở đây, chúng tôi đang sử dụng hàm đẩy mảng để thêm Chủ đề được người dùng nhập thông qua biến 'Chủ đề' vào mảng 'AllTopic' của chúng tôi.

Nếu mã mẫu AngularJS được thực thi thành công, kết quả sau sẽ hiển thị khi bạn chạy mã trên trình duyệt.
Đầu ra:

Để xem mã hoạt động, trước tiên, hãy nhập Tên chủ đề như “Angular” như hiển thị ở trên vào hộp văn bản, sau đó nhấp vào nút Gửi.

Sau khi nhấp vào nút gửi, bạn sẽ thấy mục được nhập vào hộp văn bản được thêm vào danh sách các mục.
Điều này đạt được nhờ hàm Display(), hàm này được gọi khi nhấn nút gửi.
Hàm Display() thêm văn bản vào biến mảng có tên là 'AllTopic.' Và lệnh ng-repeat của chúng tôi đi qua từng giá trị trong biến mảng 'AllTopic' và hiển thị chúng dưới dạng các mục danh sách tương ứng.

Tổng kết

Lệnh “ng-submit” được sử dụng để xử lý dữ liệu đầu vào do người dùng nhập để gửi biểu mẫu trong AngularJS.
Quá trình gửi thông tin trên một trang web thường được xử lý bởi sự kiện gửi trên trình duyệt web.
Việc gửi thông tin có thể được thực hiện thông qua yêu cầu GET hoặc POST.
Hàm Display() thêm văn bản vào biến mảng có tên là 'AllTopic.'

Chỉ thị ng-submit của AngularJS

Cách gửi biểu mẫu trong AngularJS bằng ng-submit

Ví dụ gửi biểu mẫu AngularJS

Tổng kết

Đăng kí để nhận thư mới