使用用戶名和密碼的登錄頁面

-1

如果有人使用角度和類型腳本創建了帶有用戶名和密碼字段的基本登錄頁面，請分享。使用用戶名和密碼的登錄頁面

我創造了這個HTML文件

<!DOCTYPE html> 
<html lang="en" ng-app="loginModule"> 
<head> 
    <meta charset="utf-8"> 
    <title>NADA Sign In</title> 
    <link href="../css/bootstrap.min.css" rel="stylesheet"> 
    <link href="../css/signin.css" rel="stylesheet"> 
</head> 
<body> 
<script src="../js/bootstrap.min.js"></script> 
<script src="../js/jquery.min.js"></script> 
<script src="../js/angular.min.js"></script> 
<script src="../js/login.js"></script> 

<div class="container" ng-controller="LoginController"> 
    <form class="form-signin" ng-sumbit="login()"> 
     <h2 class="form-signin-heading">Please sign in</h2> 
     <label for="username" class="sr-only">Username</label> 
     <input type="text" id="username" class="form-control" ng-model="username" placeholder="Username" required 
       autofocus> 
     <label for="password" class="sr-only">Password</label> 
     <input type="password" id="password" class="form-control" ng-model="password" placeholder="Password" required> 
     <!--<div class="checkbox"> 
      <label> 
       <input type="checkbox" value="remember-me"> Remember me 
      </label> 
     </div>--> 
     <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button> 
    </form> 
</div> 
</body> 
</html> 


module login { 
    export interface IAppCtrl extends ng.IScope{ 
     name : string; 
     password : string; 
    } 
    export class LoginController { 
     constructor($scope : IAppCtrl) { 
      scope = $scope; 
     } 

     scope.login = function() { 

     } 
    } 

    angular.module('loginModule', []).controller('LoginController', LoginController); 
}

如何訪問在提交表單的用戶名和密碼變量和登錄方法？
如何訪問用戶名和密碼在ng-model中的輸入框值？

來源

2015-08-25 Ajinkya Khavare

StackOverflow不是一個社區，您可以在其中發佈任務並希望某人e會爲你解決它。如果您遇到問題，請提供您的代碼並解釋您所期望的以及您所得到的結果。 –

'ng-model'會自動創建範圍變量。還修復'ng-submit'的錯字 – charlietfl

@Chasmo是對的，有YouTube，谷歌！ – MozzieMD

避免使用範圍，使用控制器作爲語法（看起來好多了）
重命名你的模塊到了LoginModule
註冊模塊

module LoginModule { 
 
    export class LoginController { 
 
     name: string; 
 
     password: string; 
 
     constructor() {} 
 

 
     login() { 
 
     console.log(`Login was clicked, username is ${this.name} and password is ${this.password}`) 
 
     } 
 
    } 
 
    } 
 

 
    angular.module('loginModule', []).controller('LoginController', LoginModule.LoginController);

<!DOCTYPE html> 
 
<html lang="en" ng-app="loginModule"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>NADA Sign In</title> 
 
    <link href="../css/bootstrap.min.css" rel="stylesheet"> 
 
    <link href="../css/signin.css" rel="stylesheet"> 
 
</head> 
 

 
<body> 
 
    <script src="../js/bootstrap.min.js"></script> 
 
    <script src="../js/jquery.min.js"></script> 
 
    <script src="../js/angular.min.js"></script> 
 
    <script src="../js/login.js"></script> 
 

 
    <div class="container" ng-controller="LoginController as vm"> 
 
    <form class="form-signin" ng-sumbit="vm.login()"> 
 
     <h2 class="form-signin-heading">Please sign in</h2> 
 
     <label for="username" class="sr-only">Username</label> 
 
     <input type="text" id="username" class="form-control" ng-model="vm.username" placeholder="Username" required autofocus> 
 
     <label for="password" class="sr-only">Password</label> 
 
     <input type="password" id="password" class="form-control" ng-model="vm.password" placeholder="Password" required> 
 
     <!--<div class="checkbox"> 
 
       <label> 
 
        <input type="checkbox" value="remember-me"> Remember me 
 
       </label> 
 
      </div>--> 
 
     <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button> 
 
    </form> 
 
    </div> 
 
</body> 
 

 
</html>

之外控制器

來源

2015-08-25 12:29:28 gilamran

謝謝@Gilamran這工作 –

使用用戶名和密碼的登錄頁面

回答

相關問題