AngularJS ng-submit с Пример за изпращане на формуляр

по: Джеймс Хартман Джеймс Хартман
Hours Обновено

Директива AngularJS ng-submit

- ng-подаване директива в AngularJS се използва за обвързване на приложението към събитието за изпращане на браузъра. Така че в случай на AngularJS на събитието за изпращане можете да извършите известна обработка в самия контролер и след това да покажете обработената информация на потребителя.

Как да изпратите формуляр в AngularJS с помощта на ng-submit

Процесите на подаване на информация на уеб страница обикновено се обработват от събитието за подаване в уеб браузъра. Това събитие обикновено се използва за изпращане на информация, която потребителят може да е въвел на уеб страница, към сървъра за по-нататъшна обработка, като идентификационни данни за вход, данни за формуляр и т.н. Подаването на информация може да се извърши чрез GET или POST заявка.

Нека вземем пример за изпращане на формуляр на Angular, за да видим как да изпращаме формуляри в 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. След това използваме директивата ngsubmit Angular, за да обвържем функцията “Display()” към нашата форма. Тази функция ще бъде дефинирана в нашия контролер и ще бъде извикана, когато формулярът бъде изпратен.
  2. Имаме текстов контрол, в който потребителят ще въведе темата, която иска да научи. Това ще бъде обвързано с променлива, наречена „Тема“, която ще се използва в нашия контролер.
  3. Има нормален бутон за изпращане в AngularJS, който потребителят ще щракне, когато е въвел темата, която иска.
  4. Ние сме използвали ng-повтаряне директива за показване на елементи от списък на темите, въведени от потребителя. Директивата ng-repeat преминава през всяка тема в масива „AllTopic“ и съответно показва името на темата.
  5. В нашия контролер ние декларираме масивна променлива, наречена „AllTopic“. Това ще се използва за съхраняване на всички теми, въведени от потребителя в стъпка 2.
  6. Дефинираме кода за нашата функция Display(), която ще се извиква всеки път, когато потребителят щракне върху бутона Изпрати. Тук използваме функцията push array, за да добавим темите, въведени от потребителя чрез променливата „Тема“, в нашия масив „Всички теми“.

Ако примерният код на формата AngularJS се изпълни успешно, следният изход ще бъде показан, когато стартирате кода си в браузъра.
Изход:

Изпратете формуляр в AngularJS

За да видите как кодът работи, първо въведете име на тема като „Angular“, както е показано по-горе в текстовото поле, и след това щракнете върху бутона Изпращане.

Изпратете формуляр в AngularJS

  • След като щракнете върху бутона за изпращане, ще видите елемента, който е въведен в текстовото поле, добавен към списъка с елементи.
  • Това се постига чрез функцията Display(), която се извиква при натискане на бутона за изпращане.
  • Функцията Display() добавя текста към променливата на масива, наречена „AllTopic“. И нашата директива ng-repeat преминава през всяка стойност в променливата на масива „AllTopic“ и съответно ги показва като елементи от списък.

Oбобщение

  • Директивата „ng-submit“ се използва за обработка на входа, въведен от потребителя за изпращане на формуляр в AngularJS.
  • Процесите на подаване на информация на уеб страница обикновено се управляват от събитието за подаване в уеб браузъра.
  • Подаването на информация може да стане чрез GET или POST заявка.
  • Функцията Display() добавя текста към променливата на масива, наречена „AllTopic“.