带有循环密码验证的 HTTP Get 不起作用

Question

我是 HTML 和 Javascript 的新手。我正在尝试在我的表单上显示反馈，因此当用户键入与我在我的 UserList 对象中的内容匹配的密码和用户名时，它 returns“登录成功”，但我无法让它工作。

如果你想看到它的实际效果，这里是一个 plunker：https://plnkr.co/plunk/SRS21GqLPAVgA5JU

这是我的代码：

var app = angular.module('plunker', []);

app.controller('MainCtrl', ['$scope', '$http', function($scope, $http){

  $scope.test = "Test Successful!";
  $scope.target =  'https://happybuildings.sim.vuw.ac.nz/api/brownsol/user_list.json'

  // retrieves userList JSON file from server
  $http.get($scope.target)
    .then(function successCall(response){
      $scope.output = "Successfully retrieved userList from the server"
      $scope.userList = response.data.users;
    }, 
    function errorCall(response){
      $scope.output = "Error retrieving userList from the server "
      $scope.output += " - ErrorCode = "
      $scope.output += response.status;
    });

  $scope.loginValidator = function() {


    for(var i = 0; i < userList.length; i++) {

      if ($scope.usernameInput == userList[i].LoginName && $scope.passwordInput == userList[i].Password) {
        $scope.feedback = 'Login Successful';
        return true; 
      };
    };
    
    $scope.feedback = 'Login Failed';
};

}]);

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8"/>
    <link rel="stylesheet" href="style.css">
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <p>{{test}}</p>
    <p>{{output}}</p>
    <p>{{userList}}</p>

    <div>
      <form>
        log in
        <input type = "text" placeholder = "username" ng-model = "usernameInput"></input>
        <input type = "password" placeholder = "password" ng-model = "passwordInput"></input> 
        <button type = "submit" placeholder = "login" ng-click = "loginValidator()">login</button> 
            <p>{{feedback}}</p>
      </form>
    </div> 
    <p>the first username: {{userList[0].LoginName}}</p>
    <p>the first password: {{userList[0].Password}}</p>
  </body>

</html>

Answer 1

函数中的拼写错误 $scope.loginValidator。您使用的不是 $scope.userList，而是未定义的 userList。检查控制台是否有错误。

$scope.loginValidator = function() {

    for(var i = 0; i < $scope.userList.length; i++) {

      if ($scope.usernameInput == $scope.userList[i].LoginName && $scope.passwordInput == $scope.userList[i].Password) {
        $scope.feedback = 'Login Successful';
        return true; 
      };
    };

带有循环密码验证的 HTTP Get 不起作用

HTTP Get with looping password validation not working

javascript

html

angularjs