Question

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

我为每个表单创建了单独的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按钮时，模型值将传递给函数，然后存储在本地。

所以我需要知道我什么时候不点击下一步并转到另一页，如何在第一个表单中保留当前输入的值。

Answer 1

如果您不希望在页面导航中丢失数据，则可以使用$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
});

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

1 个答案: