Angular - 在控制器中使用表单发布值 [英] Angular - Use form post values in controller
问题描述
我正在用AngularJS编写我的第一个应用程序，而我刚接触javascript。我有一个简单的问题：
如何在角度控制器中使用HTML表单中的POST值？
我有一个表单（为了方便阅读，我已经剥离了css和验证内容）：
< form name =signupFormnovalidate>
< input type =textplaceholder =Name ...ng-model =namename =namerequired />
< input type =emailname =emailng-model =emailplaceholder =Email ...required>
< button type =buttonng-click =auth.signup（）>注册< / button>
< / form>
我有一个控制器（没有错误），其功能看起来有点像这样： p>
函数SignupController（$ http，$ scope，$ rootScope，$ location）{
vm.signup =函数（名称，电子邮件，密码，onSuccess，onError）{
$ http.post（'http://myapi.com/api/authenticate/signup'，
{
name：name，
email：email，
password：password
}）。then（function（response）{
// etc
}）;
}
现在，我如何从表单中指定值名称，电子邮件地址，密码在控制器中命名，电子邮件，密码？
谢谢。
当您使用ng-model =email设置输入时，您可以通过只访问控制器中的那些变量值调用$ scope.email。
案例1：单值
HTML
< input type =textng-model =email/>
角度控制器
的console.log（$ scope.email）;案例2：对于多个值：
HTML
< input type =textng-model =user.firstname/>
< input type =textng-model =user.lastname/>
< input type =textng-model =user.email/>
角度控制器
//这将打印包含用户作为对象的所有值（名字，姓氏，电子邮件）。
console.log（$ scope.user）;
请检查此工作片段查看实时示例
< script src =https://ajax.googleapis.com/ajax/libs/angularjs/1.2。
< 23 / angular.min.js>< / script>< body ng-app =myApp> < form name =signupFormng-controller =FormCtrlng-submit =signup（）> < input type =textplaceholder =Name ...ng-model =user.namename =namerequired /> < input type =emailname =emailng-model =user.emailplaceholder =Email ...required> < input type =passwordplaceholder =Password ...ng-model =user.passwordname =passwordrequired ng-minlength =7ng-maxlength =50/> <按钮类型=提交>注册< /按钮> < / form>< / body>
I'm writing my first application in AngularJS, and I'm new to javascript. I have a simple question:
How do I use POST values from an html form in an angular controller?
I have a form (i've stripped out the css and validation stuff for ease of reading):
<form name="signupForm" novalidate>
<input type="text" placeholder="Name..." ng-model="name" name="name" required />
<input type="email" name="email" ng-model="email" placeholder="Email..." required>
<input type="password" placeholder="Password..." ng-model="password" name="password" required ng-minlength="7" ng-maxlength="50"/>
<button type="button" ng-click="auth.signup()">Sign Up</button>
</form>
I have a controller (no errors), with a function which looks a bit like this:
function SignupController($http, $scope, $rootScope, $location) {
vm.signup = function(name, email, password, onSuccess, onError) {
$http.post('http://myapi.com/api/authenticate/signup',
{
name: name,
email: email,
password: password
}).then(function(response) {
// etc
});
}
Now, how do I assign the values name, email, password from the form to name, email, password in the controller?
Thanks.
解决方案 When you set the input with ng-model="email", then you can access those variable values in controller by just calling $scope.email.
Case-1: For single value
HTML
<input type="text" ng-model="email" />
Angular Controller
console.log($scope.email);
Case-2: For multiple values
HTML
<input type="text" ng-model="user.firstname" />
<input type="text" ng-model="user.lastname" />
<input type="text" ng-model="user.email" />
Angular Controller
//This will print the all the values (firstname, lastname, email) contains user as object.
console.log($scope.user);
Please check this working snippet to see the real time example
var app = angular.module('myApp', []);
app.controller('FormCtrl', function ($scope, $http) {
$scope.user = {};
$scope.signup = function(){
console.log($scope.user);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<form name="signupForm" ng-controller="FormCtrl" ng-submit="signup()">
<input type="text" placeholder="Name..." ng-model="user.name" name="name" required />
<input type="email" name="email" ng-model="user.email" placeholder="Email..." required>
<input type="password" placeholder="Password..." ng-model="user.password" name="password" required ng-minlength="7" ng-maxlength="50"/>
<button type="submit">Sign Up</button>
</form>
</body>
这篇关于Angular - 在控制器中使用表单发布值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
