Gửi biểu mẫu AngularJS kèm theo ví dụ (ng-submit)

Anonim

Cách gửi biểu mẫu 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 đă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.

AngularJS cũng cung cấp một chỉ thị gọi là ng-submit có thể đượ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 của 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.

Hãy lấy một ví dụ về cách chúng ta có thể đạt được điều này.

Trong ví dụ về bài đăng của chúng tôi,

Chúng tôi sẽ giới thiệu một hộp văn bản cho người dùng, trong đó 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, nút này khi được nhấn sẽ thêm chủ đề vào danh sách không có thứ tự.

Event Registration

Guru99 Global Event


   Enter which topic you would like to learn
   

    

  • {{topicname}}
    •

Giải thích mã:

  1. Đầu tiên chúng tôi khai báo thẻ HTML biểu mẫu của mình, thẻ này sẽ giữ quyền kiểm soát "hộp văn bản" và "nút gửi". Sau đó, chúng tôi đang sử dụng chỉ thị ng-submit để liên kết hàm "Display ()" với biểu mẫu của chúng tôi. Hàm này sẽ được xác định trong bộ điều khiển của chúng tôi và sẽ được gọi khi biểu mẫu được gửi.
  2. Chúng tôi có một điều khiển văn bản trong đó người dùng sẽ nhập Chủ đề mà họ muốn tìm hiểu. Điều này sẽ được liên kết với một biến có tên là 'Chủ đề' sẽ được sử dụng trong bộ điều khiển của chúng tôi.
  3. Có nút gửi bình thường mà người dùng sẽ nhấp vào khi họ đã nhập chủ đề họ muốn.
  4. Chúng tôi đã sử dụng lệnh ng-repeat để hiển thị các mục danh sách của các 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.
  5. 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 để lưu giữ tất cả các chủ đề mà người dùng đã nhập ở Bước 2.
  6. 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 chức năng mảng đẩy để thêm Chủ đề do 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ã được thực thi thành công, Đầu ra sau đây sẽ được hiển thị khi bạn chạy mã của mình trong trình duyệt.

Đầu ra:

Để xem mã hoạt động, trước tiên, hãy nhập tên Chủ đề như "AngularJS" như được hiển thị ở trên vào hộp văn bản và 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 (), đượ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 gọi là 'AllTopic.' Và chỉ thị 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óm lược

Lệnh "ng-submit" được sử dụng để xử lý đầu vào do người dùng nhập khi biểu mẫu được gửi.