AngularJSフォームは提出しません

私はこの単純なHTMLフォームを以下のように持っていますが、私はAngular jsを使用しています（コントローラを参照してください） - フォームが提出されておらず、。私はオンラインチェックしないと、スタックオーバーフロー上の他の質問が、ない成功任意のポインタや指導 - 私が行方不明です事前に感謝：？AngularJSフォームは提出しません

<!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="[email protected]" 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 = "[email protected]"; 
 
     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; 
 
     }); 
 
    });

の

おかげで

出典

2017-09-22 CrystalLake62

私は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="[email protected]" 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>

出典

2017-09-22 16:36:28 Thusitha

ありがとう！それは今働いている！ – CrystalLake62

私はあなたがあまりにも早くログイン機能ブレースを閉じていると思います。調整してからもう一度お試しください。

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 = "[email protected]"; 
 
     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; 
 
     }); 
 
    }; 
 
    });

出典

2017-09-22 16:32:14

あなたはおそらく正しいです。私はあなたの新しい.jsを試しても、フォームはまだ提出しません。ボタンをクリックすると何も行われません。非常に奇妙な。私はAngularJSを初めて使っているので、おそらく私は間違っています。 – CrystalLake62

AngularJSフォームは提出しません

答えて

関連する問題