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

AngularJS ng-submit 지시문

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

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

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

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

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>

코드 설명 :

먼저 Angular 폼 제출 이벤트 예제에서 보여지는 것처럼 "텍스트 상자"와 "제출 버튼" 컨트롤을 보유할 폼 HTML 태그를 선언합니다. 그런 다음 ngsubmit Angular 지시문을 사용하여 "Display()" 함수를 폼에 바인딩합니다. 이 함수는 컨트롤러에서 정의되고 폼이 제출될 때 호출됩니다.
사용자가 배우고 싶은 주제를 입력하는 텍스트 컨트롤이 있습니다. 이는 컨트롤러에서 사용될 'Topic'이라는 변수에 바인딩됩니다.
AngularJS에는 사용자가 원하는 주제를 입력했을 때 클릭하는 일반적인 제출 버튼이 있습니다.
우리는 ng-반복 사용자가 입력하는 항목의 목록 항목을 표시하는 지시어입니다. ng-repeat 지시어는 'AllTopic' 배열의 각 주제를 살펴보고 그에 따라 주제 이름을 표시합니다.
컨트롤러에서는 'AllTopic'이라는 배열 변수를 선언합니다. 이는 2단계에서 사용자가 입력한 모든 주제를 보관하는 데 사용됩니다.
사용자가 제출 버튼을 클릭할 때마다 호출되는 Display() 함수에 대한 코드를 정의하고 있습니다. 여기서는 푸시 배열 기능을 사용하여 'Topic' 변수를 통해 사용자가 입력한 주제를 'AllTopic' 배열에 추가합니다.

AngularJS 폼 예제 코드가 성공적으로 실행되면 브라우저에서 코드를 실행할 때 다음 출력이 표시됩니다.
출력:

코드가 작동하는지 보려면 먼저 위에 표시된 대로 텍스트 상자에 "Angular"와 같은 주제 이름을 입력한 다음 제출 버튼을 클릭합니다.

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

제품 개요

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

AngularJS ng-submit 지시문

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

AngularJS 양식 제출 예

제품 개요

뉴스레터 신청하기