Angularjs -在重定向期间保留输入的表单数据，以便用户在返回该表单时继续

Angularjs - Retain the entered form data during redirection for the user to continue when coming back to that form

本文关键字：表单 用户 返回 继续 数据 重定向 保留 输入 Angularjs      更新时间：2023-09-26

我正在创建一个简单的用户数据收集项目，该项目要求用户以多种形式输入数据。

我已经为每个表单创建了单独的html页面。

用户可以输入个人信息、教育信息等。

当用户输入个人详细信息并单击next时，我将数据存储在localstorage中，最后所有数据都发送到db。

当用户单击next并再次进入同一页面时，我从localstorage检索数据并将其绑定到相应的文本框中。但是，当用户不点击next，使用导航栏选项转到另一个页面时，输入的数据将丢失。

但是我希望数据在那里，即使用户不单击next并转到另一个页面并返回到该页面，以便他可以继续填写他离开的表单。

我在Angularjs中做这个项目。

我不知道该怎么做，有没有人能告诉我正确的方法

angular.module('userDetails').factory('sessionService', [function () {
return{
    getGlobal: function(key){
        var data = localStorage.getItem("user."+ key);
        if(data){
            return JSON.parse(data).data;
        }
        return null;
    },
    get : function(key){
        var data = localStorage.getItem("user."+ key);
        if(data){
            return JSON.parse(data).data;
        }
        return null;
    },
    set: function(key, value){
        localStorage.setItem("user."+key, JSON.stringify({data: value}));
    }
};
}]);

在我的html 

<button ng-click=savePD(PD)> Next </button>

在个人信息表单中点击next按钮时:

$scope.savePD = function(PD){
    sessionService.set("personalData",PD);
    $location.path('/educationData');
}

因此，当点击next按钮时，模型值被传递给函数，然后存储在本地。

所以我需要知道，当我不点击下一步，去到另一个页面，我如何保留当前输入的值在第一个表单。

如果你不想让你的数据在页面导航中丢失，你可以使用$rootscope。

rootscope中的数据可以通过任意控制器just inject the rootscope in the controller访问。

根作用域应该在app.run函数中初始化。

angular.module('myApp', [])
.run(function($rootScope) {
    $rootScope.form_data = {}
})
.controller('myCtrl', function($scope, $rootScope) {
})
.controller('myCtrl2', function($scope, $rootScope) {
});

form_data可以在任何控制器中以任何形式作为散列。

1,

<div ng-controller="myCtrl">
  <form>
    First Name:<br>
    <input type="text" ng-model="form_data.firstName"><br>
    Last Name:<br>
    <input type="text" ng-model="form_data.lastName">
    <br><br>
    <button ng-click="next()">Next</button>
  </form>
</div>

2, 

<div ng-controller="myCtrl2">
  <form>
    Profile:<br>
    <input type="text" ng-model="form_data.profile"><br>
    Age:<br>
    <input type="number" ng-model="form_data.age">
    <br><br>
    <button ng-click="next()">Next</button>
  </form>
</div>

现在您可以从最后一个控制器的rootscope中检索值并将其发送到db。

.controller('myCtrl3', function($scope, $rootScope) {
  var data = $rootScope.form_data
  // call http using a service or here itself and send data as a parameter
});
相关文章：