dph19153 2016-09-12 13:08
浏览 64

如何使登录功能能够访问$ scope.names

I am attempting to build a login page using AngularJS, php and javascript. I have a php page that contains JSON objects including usernames and password combinations. the data is accessed and stored in the $scope.names variable. what I want is for the login function to be able to access this array and determine whether the login information entered into the login form matches any combination found in the json file. 

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

Thank you.

  • 写回答

2条回答 默认 最新

  • dongwei1263 2016-09-12 13:23
    关注

    There are many ways to do this

    1) Add login function in controller like

    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 code will become

     <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) Send Names as parameters to 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;

        });
    });

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

}

    Now Html code will be like

    <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) Use Names as global variable in script

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

    Hope it helps.

    评论

报告相同问题？

悬赏问题

  • ¥15 装 pytorch 的时候出了好多问题，遇到这种情况怎么处理？
  • ¥15 手机接入宽带网线，如何释放宽带全部速度
  • ¥30 关于#r语言#的问题：如何对R语言中mfgarch包中构建的garch-midas模型进行样本内长期波动率预测和样本外长期波动率预测
  • ¥15 ETLCloud 处理json多层级问题
  • ¥15 matlab中使用gurobi时报错
  • ¥15 这个主板怎么能扩出一两个sata口
  • ¥15 不是，这到底错哪儿了😭
  • ¥15 2020长安杯与连接网探
  • ¥15 关于#matlab#的问题：在模糊控制器中选出线路信息，在simulink中根据线路信息生成速度时间目标曲线（初速度为20m/s，15秒后减为0的速度时间图像）我想问线路信息是什么
  • ¥15 banner广告展示设置多少时间不怎么会消耗用户价值