从第1页获取Array，并使用on- click (AngularJS)在第2页使用它

Get Array from Page 1 and use it on Page 2 using on-Click (AngularJS)

本文关键字：AngularJS 在第 2页 click on- Array 1页 从第 获取      更新时间：2023-09-26

希望你们玩得开心。谢谢你一贯的理解。

框架:AngularJS, NodeJS

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

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

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

[LOGIN.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
             }
        });
    }
});
(数据OBJECT.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>

我建议使用服务。Angular的服务都是单例的。从一个控制器，你将数据放入服务，切换页面，从服务获取数据。注意:如果用户刷新页面，服务中的数据将丢失，因为服务(或angular)没有持久化状态。

每个人都会有自己的解决方案。我知道你是初学者，所以答案是为了帮助你掌握角。

您可以将数据存储在$rootScope或通过创建本地存储服务，您可以在应用程序中的任何地方访问数据，但最佳实践是创建一些本地存储服务。

相关文章：