Question

我尝试使用angular js

制作登录表单

我有json文件中的用户列表但我无法使用登录表单中的输入文本进行联合

User.json：

[{
    "username": "user1",
    "password": "pass1"
}, {
    "username": "user2",
    "password": "pass2"
}, {
    "username": "user3",
    "password": "pass3"
}, {
    "username": "user4",
    "password": "pass4"
}]

的script.js

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

app1.controller('jsonCtrl', function($scope, $http) {
    $http.get('data.json')
        .then(function(res) {
            $scope.users = res.data;
        });
});

app2.controller('formCtrl', function($scope) {
    $scope.login = function() {
        if ($scope.username == 'test' && $scope.password == 'test') {
            alert('valid username/password   ' + $scope.username);
            alert('user from json ' + $scope.users);

        } else {
            alert('invalid username/password   ' + $scope.username);
        }
    };
});

的index.html

<!DOCTYPE html>
<html lang="en">
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
   <script src="script.js"></script>
   <body ng-app="app">
      <div  ng-controller="formCtrl">
         <form name="form">
            First Name:<br>
            <input type="text" ng-model="username"><br>
            Last Name:<br>
            <input type="text" ng-model="password">
            <br><br>
            <button ng-click="login()">LOGIN</button>
         </form>
      </div>
      <div ng-controller="jsonCtrl">
         <ul>
            <li ng-repeat="user in users">
               {{user.username}} / {{user.password}}
            </li>
         </ul>
      </div>
   </body>
</html>

问题是将if ($scope.username == 'test' && $scope.password == 'test')替换为与json

相比的任何内容

这是我的代码：Plunker

Answer 1

您在应用程序中使用了两个不同的范围。我将所有标记移动到同一个控制器下，这样就可以更轻松地管理绑定了。

看看at this plnkr

var app = angular.module('app', []);

app.controller('formCtrl', function($scope, $http) {
  $http.get('data.json')
    .then(function(res) {
      $scope.users = res.data;
    });

  $scope.login = function() {
    var u = $scope.users.filter((item) => {
      return item.username == $scope.username;
    });

    if (u[0] && u[0].password == $scope.password) {
      alert('correct');

    } else {
      alert('wr0ng');

    }
  };
});

  <div>
    <form name="form">
      First Name:
      <br>
      <input type="text" ng-model="username">
      <br> Last Name:
      <br>
      <input type="text" ng-model="password">
      <br>
      <br>
      <button ng-click="login()">LOGIN</button>
    </form>
  </div>
  <div>
    <ul>
      <li ng-repeat="user in users">
        {{user.username}} / {{user.password}}
      </li>
    </ul>
  </div>

Answer 2

首先，您不应该使用像这样的明文来验证用户身份。您的服务器应该使用散列表来执行它而不知道什么是真实密码。

Http.get不是同步的，这意味着您的应用程序将继续其路径而不等待您的数据。在你的plunker中，你的formCtrl不能访问jsonCtrl范围。

您应该在服务中加载数据，因为与每次加载页面时初始化的控制器相比，它只初始化一次。

最后，您应该首先查看ui.router resolve，它允许您在显示页面之前将数据加载到您的服务中，以便稍后进行比较。

使用角度js / json进行身份验证

2 个答案: