양식 제출 예를 사용하여 AngularJS ng-제출

AngularJS ng-submit 지시문

ng-제출 AngularJS의 지시문은 애플리케이션을 브라우저의 제출 이벤트에 바인딩하는 데 사용됩니다. 그래서 다음의 경우 AngularJS와 제출 이벤트에서는 컨트롤러 자체 내에서 일부 처리를 수행한 다음 처리된 정보를 사용자에게 표시할 수 있습니다.

ng-submit을 사용하여 AngularJS에서 양식을 제출하는 방법

웹 페이지에 정보를 제출하는 프로세스는 일반적으로 웹 브라우저의 제출 이벤트에 의해 처리됩니다. 이 이벤트는 일반적으로 로그인 자격 증명, 양식 데이터 등과 같은 추가 처리를 위해 사용자가 웹 페이지에 입력했을 수 있는 정보를 서버로 보내는 데 사용됩니다. 정보 제출은 GET 또는 POST 요청을 통해 수행될 수 있습니다.

AngularJS에서 양식을 제출하는 방법을 알아보기 위해 Angular 양식 제출 예제를 살펴보겠습니다.

AngularJS 양식 제출 예시에서는 텍스트를 제시하겠습니다.box 배우고 싶은 주제를 입력할 수 있는 사용자에게. 페이지에 제출 버튼이 있는데, 이 버튼을 누르면 주제가 정렬되지 않은 목록에 추가됩니다.

ng-submit을 사용하여 AngularJS에서 양식 제출
ng-submit을 사용하여 AngularJS에서 양식 제출

AngularJS 양식 제출 예

이제 ng-submit 지시어를 사용하여 컨트롤러에서 AngularJS 양식을 제출하는 예를 살펴보겠습니다.

<!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 태그를 선언합니다. box” 및 “제출 버튼” 컨트롤(Angular 양식 제출 이벤트 예제에 표시됨) 그런 다음 ngsubmit Angular 지시문을 사용하여 "Display()" 함수를 양식에 바인딩합니다. 이 함수는 컨트롤러에 정의되며 양식이 제출될 때 호출됩니다.
  2. 사용자가 배우고 싶은 주제를 입력하는 텍스트 컨트롤이 있습니다. 이는 컨트롤러에서 사용될 'Topic'이라는 변수에 바인딩됩니다.
  3. AngularJS에는 사용자가 원하는 주제를 입력했을 때 클릭하는 일반적인 제출 버튼이 있습니다.
  4. 우리는 ng-반복 사용자가 입력하는 항목의 목록 항목을 표시하는 지시어입니다. ng-repeat 지시어는 'AllTopic' 배열의 각 주제를 살펴보고 그에 따라 주제 이름을 표시합니다.
  5. 컨트롤러에서는 'AllTopic'이라는 배열 변수를 선언합니다. 이는 2단계에서 사용자가 입력한 모든 주제를 보관하는 데 사용됩니다.
  6. 사용자가 제출 버튼을 클릭할 때마다 호출되는 Display() 함수에 대한 코드를 정의하고 있습니다. 여기서는 푸시 배열 기능을 사용하여 'Topic' 변수를 통해 사용자가 입력한 주제를 'AllTopic' 배열에 추가합니다.

AngularJS 양식 예제 코드가 성공적으로 실행되면 다음과 같습니다.wing 브라우저에서 코드를 실행하면 출력이 표시됩니다.
출력:

AngularJS에서 양식 제출

코드가 작동하는지 확인하려면 먼저 위의 텍스트에 표시된 대로 "Angular"와 같은 주제 이름을 입력하세요.box 그런 다음 제출 버튼을 클릭하세요.

AngularJS에서 양식 제출

  • 제출 버튼을 클릭하면 텍스트에 입력한 항목이 표시됩니다.box 항목 목록에 추가되었습니다.
  • 이는 제출 버튼을 눌렀을 때 호출되는 Display() 함수에 의해 수행됩니다.
  • Display() 함수는 'AllTopic'이라는 배열 변수에 텍스트를 추가합니다. 그리고 ng-repeat 지시어는 배열 변수 'AllTopic'의 각 값을 살펴보고 그에 따라 목록 항목으로 표시합니다.

요약

  • "ng-submit" 지시문은 AngularJS에서 양식 제출을 위해 사용자가 입력한 입력을 처리하는 데 사용됩니다.
  • 웹 페이지에 정보를 제출하는 프로세스는 일반적으로 웹 브라우저의 제출 이벤트에 의해 처리됩니다.
  • 정보 제출은 GET 또는 POST 요청을 통해 수행할 수 있습니다.
  • Display() 함수는 'AllTopic'이라는 배열 변수에 텍스트를 추가합니다.