gpt4 book ai didi

html - 如何在 angularjs 中将 ngStorage 用于多种形式?

转载 作者:行者123 更新时间:2023-11-28 01:02:46 26 4
gpt4 key购买 nike

如何在本地存储中存储多个表单数据,我正在尝试在angular js中将多个表单数据存储在本地存储中。我尝试了以下代码:

 <form name="welcome">
<input type='text' ng-model='pageData.field1' />
<input type='text' ng-model='pageData.field2' />
<input type='text' ng-model='pageData.field3' />
</form>
<form name="registration">
<input type='text' ng-model='pageData2.field1' />
<input type='text' ng-model='pageData2.field2' />
<input type='text' ng-model='pageData2.field3' />
</form>
<form name="sendMail">
<input type='text' ng-model='pageData3.field1' />
<input type='text' ng-model='pageData3.field2' />
<input type='text' ng-model='pageData3.field3' />
</form>
<script>
myApp.service('dataService',function(){

var cache;

this.saveData = function(data){
cache = data;
};

this.retrieveData = function(){
return cache;
};

});
myApp.controller('Ctrl1', function($scope, dataService){

dataService.saveData($scope.pageData);

});

myApp.controller('Ctrl2', function($scope, dataService){

$scope.pageData = dataService.retrieveData();

});
</script>

最佳答案

<!DOCTYPE html>
<html ng-app="testapp" >
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.2/angular-ui-router.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div ng-controller="Ctrl1">
<form name="welcome">
<input type='text' ng-model='pageData1.field1' />
<input type='text' ng-model='pageData1.field2' />
<input type='text' ng-model='pageData1.field3' />
<input type="button" value="welcomeBTn" ng-click="welcomeTo(pageData1);" />
</form>
</div>
<div ng-controller="Ctrl2">
<form name="registraitonForm">
<input type='text' ng-model='pageData2.field1' />
<input type='text' ng-model='pageData2.field2' />
<input type='text' ng-model='pageData2.field3' />
<input type="button" value="regBTn" ng-click="registration(pageData2);" />
</form>
</div>
<div ng-controller="Ctrl3">
<form name="mailToForm">
<input type='text' ng-model='pageData3.field1' />
<input type='text' ng-model='pageData3.field2' />
<input type='text' ng-model='pageData3.field3' />
<input type="button" value="mailBtn" ng-click="mailTo(pageData3);" />
</form>
</div>

<script type="text/javascript">


var app = angular.module('testapp', []);
/*main controller at index page*/
app.service('dataService',function(){

var self = this;

self.saveData = function(key, data){
localStorage.setItem(key, JSON.stringify(data));
};

self.retrieveData = function(key){
return JSON.parse(localStorage.getItem(key));
};
return self;

});
app.controller('Ctrl1', function($scope, dataService){
$scope.welcomeTo = function(pageData1){
dataService.saveData('page1', pageData1); // like this pass the key of the value to be stored in local storage

}
});

app.controller('Ctrl2', function($scope, dataService){
$scope.registration = function(pageData2) {
dataService.saveData('page2', pageData2);
console.log($scope.pageData2) // like this pass the key of the value to be stored in local storage
}
});


app.controller('Ctrl3', function($scope, dataService){

$scope.mailTo = function(pageData3) {
dataService.saveData('page3', pageData3);
console.log($scope.pageData3)// like this pass the key of the value to be stored in local storage
console.log(dataService.retrieveData('page1'))
}
});


</script>

</body>

https://plnkr.co/edit/kmBA3Cco8QNDL8i4eOjz?p=preview为你工作 plunker。

关于html - 如何在 angularjs 中将 ngStorage 用于多种形式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41345247/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com