ログイン機能が$ scope.namesにアクセスできるようにする方法

-1

AngularJS、php、およびjavascriptを使用してログインページを作成しようとしています。私はユーザー名とパスワードの組み合わせを含むJSONオブジェクトを含むPHPページを持っています。データはアクセスされ、$ scope.names変数に格納されます。私が望むのは、ログイン関数がこの配列にアクセスし、ログインフォームに入力されたログイン情報がjsonファイルにある任意の組み合わせと一致するかどうかを判断することです。

<!DOCTYPE html> 
<html > 
<style> 
table, th , td { 
    border: 1px solid grey; 
    border-collapse: collapse; 
    padding: 5px; 
} 
table tr:nth-child(odd) { 
    background-color: #f1f1f1; 
} 
table tr:nth-child(even) { 
    background-color: #ffffff; 
} 
</style> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
<body> 

<button type = "button" class = "btn btn-primary" data-toggle = "modal" data-target = "#login">Log In</button> 
<br/> 
<br/> 

<div class = "container"> 

    <h2>TTP Banking Portal</h2> 
    <ul class = "nav nav-tabs"> 
     <li class = "active"><a data-toggle = "tab" href = "#home">Home</a></li> 
     <li><a data-toggle = "tab" href = "#transfer">Transfer Funds</a></li> 
     <li><a data-toggle = "tab" href = "#reports">Generate Reports</a></li> 
     <li><a data-toggle = "tab" href = "#chat">Chat with An Agent</a></li> 
     <li><a data-toggle = "tab" href = "#email">Email your Bank</a></li> 
    </ul> 

    <div class = "tab-content"> 

     <div id = "home" class = "tab-pane fade in active"> 



<div ng-app="myApp" ng-controller="clientsCtrl" id = "login" class = "modal fade"> 

     <div class = "modal-dialog"> 
      <div class = "modal-content"> 
       <div class = "modal-header"> 
        <h3>Enter Login Information Below</h3> 
       </div> 
      <div class = "modal-body"> 
       <form> 
        <input type = "input" name = "user" placeholder = "Username" id = "Username" required> 
        <input type = "input" name = "pass" placeholder = "Password" id = "Password" required> 
        <button id = "loginbtn" type = "button" class = "btn btn-success" onclick = "login()">Log In</button> 
       </form> 
      </div> 
      <div class = "modal-footer"> 
       <button type = "button" class = "btn-warning" data-toggle = "modal" data-target = "#forgotPassword">Forget Password</button> 
       <button type = "button" class = "btn btn-primary" id = "close" name = "close" data-dismiss = "modal">Close</button> 
      </div> 
      </div> 
     </div> 
</div> 


</div> 

<script> 

var app = angular.module('myApp', []); 
    app.controller('clientsCtrl', function($scope, $http) { 
     $http.get("clients.php") 
     .then(function(response) { 
      $scope.names = response.data.records; 

     }); 
    }); 

function login() { 
    var enteredUsername = document.getElementById("Username").value; 
    var enteredPassword = document.getElementById("Password").value; 
    console.log(enteredUsername + "," + enteredPassword); 
    for (var i = 0; i < $scope.names.length; i++) { 
     console.log($scope.names[i]); 
    } 

} 


</script> 

</body> 
</html>

ありがとうございます。

出典

2016-09-12 Tyler Grim

代わりにクライアントにユーザー名/パスワードの組み合わせを返すには、好ましくは、PHPのフレームワークから認証ソリューションを使用して、サーバー上でそれらを確認する必要があります。誰でもdevtoolsのネットワークタブにあるサーバーからのjson応答を見ることができ、非常に安全です。 –

私が働いているチームは何らかの理由でこの方法を使いたいと思っています。そう、あなたはそれをこのようにする方法を知っていますか？ –

$ scopeはローカル変数です。それをコントローラの外で使うことはできません。代わりにnamesという名前のグローバル変数を使用し、それをループします。 –

この

1を行うには、多くの方法があります）

var app = angular.module('myApp', []); 
    app.controller('clientsCtrl', function($scope, $http) { 
     $http.get("clients.php") 
     .then(function(response) { 
      $scope.names = response.data.records; 

     }); 
$scope.Login= function(){ 
var enteredUsername = document.getElementById("Username").value; 
    var enteredPassword = document.getElementById("Password").value; 
    console.log(enteredUsername + "," + enteredPassword); 
    for (var i = 0; i < $scope.names.length; i++) { 
     console.log($scope.names[i]); 
    } 
}; 
    });

HTMLコードが

<form> 
<input type = "input" name = "user" placeholder = "Username" id = "Username" required> 
<input type = "input" name = "pass" placeholder = "Password" id = "Password" required> 
<button id = "loginbtn" type = "button" class = "btn btn-success" ng-click = "Login()">Log In</button> 
    </form>

2になりますようにコントローラにログイン機能を追加します）Login関数のパラメータとしてNamesを送ります

var app = angular.module('myApp', []); 
    app.controller('clientsCtrl', function($scope, $http) { 
     $http.get("clients.php") 
     .then(function(response) { 
      $scope.names = response.data.records; 

     }); 
    }); 

function login(Names) { 
    var enteredUsername = document.getElementById("Username").value; 
    var enteredPassword = document.getElementById("Password").value; 
    console.log(enteredUsername + "," + enteredPassword); 
    for (var i = 0; i < Names.length; i++) { 
     console.log(Names[i]); 
    } 

}

今のHTMLコードを

<form> 
    <input type = "input" name = "user" placeholder = "Username" id = "Username" required> 
    <input type = "input" name = "pass" placeholder = "Password" id = "Password" required> 
    <button id = "loginbtn" type = "button" class = "btn btn-success" onclick = "login({{names}})">Log In</button> 
     </form>

3のようになります）

<script> 
var Names={}; //as Global scope can use anywhere in this script scope like I used in login function 
var app = angular.module('myApp', []); 
    app.controller('clientsCtrl', function($scope, $http) { 
     $http.get("clients.php") 
     .then(function(response) { 
      $scope.names = response.data.records; 
      Names=response.data.records; 

     }); 
    }); 

function login() { 
    var enteredUsername = document.getElementById("Username").value; 
    var enteredPassword = document.getElementById("Password").value; 
    console.log(enteredUsername + "," + enteredPassword); 
    for (var i = 0; i < Names.length; i++) { 
     console.log(Names[i]); 
    } 

} 


</script>

スクリプト内でグローバル変数としてNamesを使用して、それがお役に立てば幸いです。

出典

2016-09-12 13:23:22 Paarth

最初のオプションに変更すると、クリックは何もしません。 2番目のオプションに変更すると、「名前」は定義されていません。 –

最初のオプションはエラーを発生させず、クリックが発生しないようにしています。名前をグローバル変数として使用する方法がわかりません –

'form'タグがコントローラスコープ内にあることを確認してください（）' Names'グローバルスコープ – Paarth

これはAngularJSで上記のコードを純粋に実装したものです。

HTML：入力フィールドに定義されたモデル。

<form> 
    <input ng-model='user.name' type="input" name="user" placeholder="Username" id = "Username" required> 
    <input ng-model='user.password' type="password" name="pass" placeholder="Password" id="Password" required> 
    <button id="loginbtn" type="button" class="btn btn-success" ng-click="login(user)">Log In</button> 
</form>

スクリプト：

var app = angular.module('myApp', []); 
    app.controller('clientsCtrl', function($scope, $http) { 

    //this is sample data for names. 
    $scope.names = [{username: 'abc', password: 'abc'},{username: 'abc1', password: 'abc1'}]; 
    $scope.user = {}; 
    $scope.login = function (user) { 
    var enteredUsername = user.name, 
     enteredPassword = user.password; 
    console.log(enteredUsername + "," + enteredPassword); 
    for (var i = 0; i < $scope.names.length; i++) { 
     if($scope.names[i].username === enteredUsername && $scope.names[i].password === enteredPassword) { 
     alert('Logged In'); 
     break; 
     } 
    } 
    } 
});

出典

2016-09-12 17:42:35

ログイン機能が$ scope.namesにアクセスできるようにする方法

答えて

関連する問題