AngularJS表单不会提交
[英]AngularJS form won't submit
问题描述
I have this simple HTML form as below and I am using the Angular js (see the controller. - the is the form is not getting submitted and for some reason I am not able to read the values. i checked online and other questions on Stack overflow, but no success. Any pointers or guidance - what am i missing? thanks in advance : 
我有一个如下所示的简单HTML表单，并且我正在使用Angular js（请参阅控制器。-表单未提交，由于某种原因，我无法读取这些值。我在线检查了Stack上的其他问题溢出，但没有成功。任何指示或指导-我缺少什么？在此先感谢：
<!doctype html> <html ng-app="auth"> <head> <title>Hello AngularJS</title> </head> <body> <form method="post" ng-submit="login()" novalidate ng-controller="Login"> DBID<input type="text" name="dbId" value="23" ng-model="dbId" /> UserName<input type="text" name="username" value="test@test.com" ng-model="username" /> Password<input type="text" name="password" value="test1234" ng-model="password" /> <input type="submit" id="submit" value="login" /> <pre>list={{list}}</pre> <p>The Token is: {{token}}</p> </form> <script src="Scripts/angular.js"></script> <script src="Scripts/login.js"></script> </body> </html>
Here is my AngularJS controller: 这是我的AngularJS控制器：
var auth = angular.module('auth', []); auth.controller('Login', function ($scope, $http) { $scope.login = function () { if ($scope.dbId) { $scope.list.push(this.dbId); $scope.text = ''; } }; var Credentials = new Object(); Credentials.DBID = "23"; Credentials.username = "test@test.com"; Credentials.password = "test1234"; $http({ dataType: 'json', method: 'POST', url: 'http://localhost:55049/api/Security/Login', data: Credentials, headers: { 'Content-Type': 'application/json', 'Authorization': 'Basic VGVzdEFwcGxpY2F0aW9uVG9rZW46' } }).then(function (response) { $scope.token = response.data; }); });
Thanks 谢谢
2 个解决方案
解决方案1
1 2017-09-22 16:32:14
i think you are closing the login function brace too early. 我认为您为时过早关闭登录功能括号。 adjusted it and try again. 调整它，然后重试。
var auth = angular.module('auth', []); auth.controller('Login', function ($scope, $http) { $scope.login = function () { if ($scope.dbId) { $scope.list.push(this.dbId); $scope.text = ''; } var Credentials = new Object(); Credentials.DBID = "23"; Credentials.username = "test@test.com"; Credentials.password = "test1234"; $http({ dataType: 'json', method: 'POST', url: 'http://localhost:55049/api/Security/Login', data: Credentials, headers: { 'Content-Type': 'application/json', 'Authorization': 'Basic VGVzdEFwcGxpY2F0aW9uVG9rZW46' } }).then(function (response) { $scope.token = response.data; }); }; });
解决方案2
0 已采纳 2017-09-22 16:36:28
I added some modifications to the JavaScript code and it's working fine. 我对JavaScript代码进行了一些修改，并且运行良好。 Please take a look and run the sample code to see it in action. 请看一下并运行示例代码以查看实际效果。 Also I changed the username, DBID and password to be dynamic with input values. 另外，我将用户名，DBID和密码更改为具有输入值的动态名称。
var auth = angular.module('auth', []); auth.controller('Login', function($scope, $http) { $scope.list = []; $scope.login = function() { if ($scope.dbId) { $scope.list.push(this.dbId); $scope.text = ''; var Credentials = new Object(); Credentials.DBID = $scope.dbId; Credentials.username = $scope.username; Credentials.password = $scope.password; alert("Posting your data: " + JSON.stringify(Credentials)); $http({ dataType: 'json', method: 'POST', url: 'http://localhost:55049/api/Security/Login', data: Credentials, headers: { 'Content-Type': 'application/json', 'Authorization': 'Basic VGVzdEFwcGxpY2F0aW9uVG9rZW46' } }).then(function(response) { $scope.token = response.data; }); } else { alert("Please add DBID"); } }; });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="auth" ng-controller="Login"> <form method="post" ng-submit="login()" novalidate ng-controller="Login"> DBID<input type="text" name="dbId" value="23" ng-model="dbId" /> UserName <input type="text" name="username" value="test@test.com" ng-model="username" /> Password <input type="text" name="password" value="test1234" ng-model="password" /> <input type="submit" id="submit" value="login" /> <pre>list={{list}}</pre> <p>The Token is: {{token}}</p> </form> </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.