Question

我有这个简单的HTML表单，如下所示，我正在使用Angular js（请参阅控制器。 - 表单未提交，由于某些原因我无法读取值。我在线查看了其他有关Stack溢出的问题，但没有成功。任何指针或指导 - 我缺少什么？提前感谢：

＆＃13;

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

＆＃13;

这是我的AngularJS控制器：

＆＃13;

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

＆＃13;

由于

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

Answer 2

我对JavaScript代码添加了一些修改，但它运行正常。请查看并运行示例代码以查看其实际操作。此外，我将用户名，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>

AngularJS表格不会提交

2 个答案: