AngularJS表单不会提交答案

【问题标题】：AngularJS form won't submitAngularJS表单不会提交
【发布时间】：2017-09-22 16:26:27
【问题描述】：

我有这个简单的 HTML 表单，如下所示，我正在使用 Angular js（请参阅控制器。 - 表单没有被提交，由于某种原因我无法读取值。我在网上和其他关于堆栈溢出的问题，但没有成功。任何指针或指导 - 我错过了什么？提前感谢：

    <!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>

这是我的 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;
        });
    });

谢谢

【问题讨论】：

标签： javascript angularjs forms

【解决方案1】：

我认为您关闭登录功能大括号为时过早。调整后重试。

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;
        });
    };
    });

【讨论】：

你可能是对的。我尝试了您的新 .js，但表单仍然无法提交。单击按钮什么也不做。很奇怪。我是 AngularJS 的新手，所以我做错了可能很简单。

【解决方案2】：

我对@987654321@ 代码进行了一些修改，它运行良好。请查看并运行示例代码以查看它的实际效果。此外，我将用户名、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>

【讨论】：