从第 1 页获取数组并使用 on-Click (AngularJS) 在第 2 页上使用它

Question

希望你们能踢又能跳。感谢您一如既往的理解。

框架：AngularJS、NodeJS

我正在设计一个登录页面。但是要比较的数据是 testData.html 中的一组项目。我想调用 login.html 上的数据并将其与用户的输入进行比较。

登录表单正常工作，但未读取数据。我试过单独编译dataobject.html文件，没有运行。

我不想将此数据存储在 .json 文件中。 稍后我将学习如何使用 MongoDB 读取数据并进行比较 请检查以下代码。

[登录.HTML]

<div ng-app="myApp" ng-controller="loginCtrls" style="height:auto;">
    <form name="lForm">
          <div class="container">
            <label><b>Username</b></label>
            <input class="w3-round" type="text" name="username" placeholder="Username" ng-model="username" required>    
            <div align="right" style="width:550px;">&nbsp;
                <span style="color:red" ng-show="lForm.username.$dirty && lForm.username.$invalid">
                    <span ng-show = "lForm.username.$error.required">Username is required.</span>
                </span>         
            </div>

            <label><b>Password</b></label>
            <input class="w3-round" type="password" name="password" ng-model="password" placeholder="Password" required>
            <div align="right" style="width:550px;">&nbsp;
                <span style="color:red" ng-show="lForm.password.$dirty && lForm.password.$invalid">
                    <span ng-show = "lForm.password.$error.required">Password is required.</span>
                </span>         
            </div>

            <div align="center">
            <button class="w3-btn w3-teal w3-round" style="height:45px; width:100%; font-size:16px;" ng-disabled = "lForm.username.$dirty && lForm.username.$invalid || lForm.password.$dirty && lForm.password.$invalid" ng-click="chkData()">Click to Login</button>
            </div>
            <input type="checkbox" checked="checked"> Remember me
          </div>

          <div class="container" style="background-color:#f1f1f1; margin-top:0;">
            <span>Forgot <a href="#forgotpass.html">password?</a></span>
          </div>
    </form>
        <h4>{{result}} login attempt</h4>
</div>

<script src="js/loginCtrl.js"></script>

[LOGINCTRL.JS]

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

//get the file from the dataobject.html file
  $http.get("dataobject.html").then(function (response) {
    //parse the array object to $scope.users    
 $scope.users = response.data.records; 

  });

//this function checks the user's input and 
//compares it with the any match in object array
//the object array data has been passed into $scope.users
    $scope.chkData = function(){
        $scope.users = $scope.data.records;
         angular.forEach($scope.users, function(value, key){

             if(angular.equals(value.Username, $scope.username) && (value.Password, $scope.password)){
                $scope.result = "Successful ";//msg to be displayed
             }else {
                $scope.result = "Unsuccessful ";//msg to be displayed
             }
        });
    }
});

[数据对象.HTML]

<script src = "js/angular.min.js" type="text/javascript"></script>

<div ng-app="myApp" ng-controller="mdata">
</div>

<script>
var app = angular.module('myApp', []);
app.controller('mdata', function($scope) {
      $scope.data =  
      { "records":[ {"Username":"Alfreds","Password":"alfred","Session ID":"1"}, {"Username":"Ana","Password":"ana","Session ID":"2"}, {"Username":"Moreno","Password":"moreno","Session ID":"3"}] };
      });

});
</script>

Answer 1

我建议使用服务来完成。 Angular 服务是单例的。因此，从一个控制器，您将数据放入服务中，切换页面，从服务中获取数据。 注意：如果用户刷新页面，服务中的数据将丢失，因为服务（或相关的角度）不会保持状态。

ofc，每个人都有自己的解决方案。我看到您是初学者，因此答案旨在帮助您掌握角度。

Answer 2

您可以将数据存储在 $rootScope 或通过创建 localStorage 服务，您可以在应用程序的任何位置访问数据，但最佳做法是创建一些 localStorage 服务。