我正在创建一个简单的用户数据收集项目,该项目要求用户以多种形式输入数据。
我为每个表单创建了单独的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
按钮时,模型值将传递给函数,然后存储在本地。
所以我需要知道我什么时候不点击下一步并转到另一页,如何在第一个表单中保留当前输入的值。
答案 0 :(得分:0)
如果您不希望在页面导航中丢失数据,则可以使用$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
});