我如何获得登录函数能够访问$scope.names

How do I get the login function to be able to access $scope.names

本文关键字：访问 scope names 何获得登录函数更新时间：2023-09-26

我正在尝试使用AngularJS, php和javascript构建一个登录页面。我有一个php页面，其中包含JSON对象，包括用户名和密码组合。数据被访问并存储在$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>

谢谢。

这是上面代码在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;
      }
    }
  }
});

有很多方法可以做到这一点

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)将Names作为参数发送给Login函数

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)使用Names作为脚本的全局变量

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

希望能有所帮助。