我想在我的 Angular 应用程序中记录操作。
如果我无法发布,那么我想将该项目添加到本地存储中的另一个日志,以便下次发布时我也可以尝试添加这些项目。
完成此操作后,我想尝试发布当前项目。我还想要一个(同步)按钮,它在整个过程中运行而不通过操作日志过程。这样用户就可以尝试发布他们之前无法发布的所有项目。
我正在考虑这样处理它。 提交时
-将项目添加到本地存储,然后尝试发布。 (以便它首先发布较早的项目)
成功了
-从本地存储中删除项目
错误
-将项目保存到本地存储
如下图所示,我正在努力实现这一目标,但我不确定这是否是解决此问题的最佳方式。
目前我可以发布成功的数据,但不能从本地存储中删除单个项目。
我添加了一个名为 removeName 的 userService,我在下面的代码中将其注释掉了,因为它当前删除的是 _nameLog 而不是项目的本地存储引用。
但是当您运行 codepen demo 中的代码时它每次都会发布每个项目,因为我没有成功删除它们?
如何在不删除 _namelog 的情况下成功删除本地存储项(因为这需要保留在 ng-repeat 中),或者我应该采用不同的方法来处理这个问题吗?
<body ng-app="myApp">
<div ng-controller="MyCtrl">
<input type="text" ng-model="updatedname">
<input type="button" value="Change name" ng-click="changeName(updatedname)"/>
<br/>
Hello, {{name}}!
<ul>
<li ng-repeat="name in nameLog">{{name.value}} - {{name.time}}</li>
</ul>
<input type="button" value="sync" ng-click="syncPosts()"/>
</div>
</body>
<script>
var myApp = angular.module('myApp',[]);
myApp.factory('UserService', ['$window','$http', function($window,$http) {
var _nameLog = [];
var userService = {};
userService.name = "John";
userService.ChangeName = function (value) {
userService.name = value;
};
userService.logName = function (value) {
_nameLog.push ({
"value":value,
"time" :Date.now()
});
};
userService.removeName = function (value) {
return delete _nameLog[0];
};
userService.getNameLog = function(){
return _nameLog;
};
userService.setLS = function(key, value) {
$window.localStorage[key] = value;
},
userService.getLS = function(key, defaultValue) {
return $window.localStorage[key] || defaultValue;
};
userService.setObject = function(key, value) {
$window.localStorage[key] = JSON.stringify(value);
};
userService.getObject = function(key) {
return JSON.parse($window.localStorage[key] || '{}');
};
userService.testPost = function(myVal,myTime) {
return $http.post('http://jsonplaceholder.typicode.com/posts', {title:myVal,body:myTime,userId: 1});
};
return userService;
}]);
function MyCtrl($scope, UserService) {
$scope.name = UserService.name;
$scope.updatedname="";
$scope.changeName=function(data){
$scope.updateServiceName(data);
}
$scope.updateServiceName = function(name){
UserService.ChangeName(name);
UserService.logName(name);
$scope.name = UserService.name;
$scope.nameLog = UserService.getNameLog();
UserService.setLS('name', JSON.stringify($scope.nameLog));
getPosts();
}
$scope.syncPosts = function(){
getPosts();
}
function testPost(myVal,myTime) {
UserService.testPost(myVal,myTime)
.success(function(data, status, headers, config) {
console.log('success');
console.log(data);
//UserService.removeName();
})
.error(function(data, status, headers, config) {
console.log('error');
});
}
function getPosts(){
getObj = UserService.getObject('name');
for (var k in getObj) {
var myVal = getObj[k].value;
var myTime = getObj[k].time;
testPost(myVal,myTime);
console.log(getObj[k].value);
}
}
}
</script>
最佳答案
"How can I remove the local storage item on success without removing the _namelog "
您的设计存在一些问题:
1) 对于本地存储 key=name value 是一个数组。在您的 testPost 中,您不知道要发布的是哪个数组项。如果您知道可以从 LS 检索该数组,则从数组中拼接该元素并将其字符串化回 LS。
2) 来回需要太多的 String 和 JSON。
因此,我的建议是遵循 name-0、name-1、name-2 等 key 命名方案,并将每个日志条目存储为单独的 key 。在 LS 中保留一个计数器。添加日志条目时增加此值。然后在你的 testPost 中你可以删除那个键。将 k 作为参数从 getPosts 传递给 testPost。
解决方案在 plunkr solution 中
<body ng-app="myApp">
<div ng-controller="MyCtrl as ctrl">
<input type="text" ng-model="updatedname">
<input type="button" value="Change name" ng-click="changeName(updatedname)"/>
<br/>
Hello, {{name}}!
<ul>
<li ng-repeat="name in nameLog">{{name.value}} - {{name.time}}</li>
</ul>
<input type="button" value="sync" ng-click="syncPosts()"/>
</div>
</body>
angular.module('myApp', [])
.factory('UserService', ['$window', '$http',
function($window, $http) {
var _nameLog = [];
var userService = {};
userService.name = "John";
userService.ChangeName = function(value) {
userService.name = value;
};
userService.logName = function(value) {
var logCount = userService.getLS('count', undefined);
if (angular.isUndefined(logCount)) {
logCount = -1;//so that this gets incremented to 0
}
var obj = {
"value": value,
"time": Date.now()
};
logCount++;
_nameLog.push(obj);
this.setObject('count',logCount);
this.setObject('name#'+logCount, obj);
};
userService.removeName = function(value) {
return delete _nameLog[0];
};
userService.getNameLog = function() {
return _nameLog;
};
userService.setLS = function(key, value) {
$window.localStorage[key] = value;
},
userService.getLS = function(key, defaultValue) {
return $window.localStorage[key] || defaultValue;
};
userService.deleteLS = function(key) {
return $window.localStorage.removeItem(key);
};
userService.setObject = function(key, value) {
$window.localStorage[key] = JSON.stringify(value);
};
userService.getObject = function(key) {
return JSON.parse($window.localStorage[key] || '{}');
};
userService.testPost = function(myVal, myTime) {
return $http.post('http://jsonplaceholder.typicode.com/posts', {
title: myVal,
body: myTime,
userId: 1
});
};
return userService;
}
])
.controller('MyCtrl', ['$scope', 'UserService',
function($scope, UserService) {
$scope.name = UserService.name;
$scope.updatedname = "";
$scope.changeName = function(data) {
$scope.updateServiceName(data);
}
$scope.updateServiceName = function(name) {
UserService.ChangeName(name);
UserService.logName(name);
$scope.name = UserService.name;
$scope.nameLog = UserService.getNameLog();
//$scope.getPosts();
}
$scope.syncPosts = function() {
$scope.getPosts();
}
$scope.testPost = function(myVal, myTime, k) {
UserService.testPost(myVal, myTime)
.success(function(data, status, headers, config) {
console.log('success');
console.log(data);
//UserService.removeName();
UserService.deleteLS('name#'+k);
})
.error(function(data, status, headers, config) {
console.log('error');
});
}
$scope.getPosts = function() {
var logCount = UserService.getLS('count', undefined);
if (angular.isUndefined(logCount)) {
return;//there is nothing in log
}
for(var k = 0 ; k <= logCount ; k++) {
var getObj = UserService.getObject('name#'+k);
var myVal = getObj.value;
var myTime = getObj.time;
$scope.testPost(myVal, myTime, k);
console.log(getObj.value);
}
}
}
]);
关于javascript - 具有 promise 和本地存储的 Angular JS 日志记录数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26824597/
我想安装一个带有一些身份验证的私有(private)Rubygem服务器。我希望能够使用公共(public)Ubuntu服务器托管内部gem。我读到了http://docs.rubygems.org/read/chapter/18.但是那个没有身份验证-如我所见。然后我读到了https://github.com/cwninja/geminabox.但是当我使用基本身份验证(他们在他们的Wiki中有)时,它会提示从我的服务器获取源。所以。如何制作带有身份验证的私有(private)Rubygem服务器?这是不可能的吗?谢谢。编辑:Geminabox问题。我尝试“捆绑”以安装新的gem..
我主要使用Ruby来执行此操作,但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式,例如使用这个yaml文件,它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i
Sinatra新手;我正在运行一些rspec测试,但在日志中收到了一堆不需要的噪音。如何消除日志中过多的噪音?我仔细检查了环境是否设置为:test,这意味着记录器级别应设置为WARN而不是DEBUG。spec_helper:require"./app"require"sinatra"require"rspec"require"rack/test"require"database_cleaner"require"factory_girl"set:environment,:testFactoryGirl.definition_file_paths=%w{./factories./test/
有时我需要处理键/值数据。我不喜欢使用数组,因为它们在大小上没有限制(很容易不小心添加超过2个项目,而且您最终需要稍后验证大小)。此外,0和1的索引变成了魔数(MagicNumber),并且在传达含义方面做得很差(“当我说0时,我的意思是head...”)。散列也不合适,因为可能会不小心添加额外的条目。我写了下面的类来解决这个问题:classPairattr_accessor:head,:taildefinitialize(h,t)@head,@tail=h,tendend它工作得很好并且解决了问题,但我很想知道:Ruby标准库是否已经带有这样一个类? 最佳
我有两个Rails模型,即Invoice和Invoice_details。一个Invoice_details属于Invoice,一个Invoice有多个Invoice_details。我无法使用accepts_nested_attributes_forinInvoice通过Invoice模型保存Invoice_details。我收到以下错误:(0.2ms)BEGIN(0.2ms)ROLLBACKCompleted422UnprocessableEntityin25ms(ActiveRecord:4.0ms)ActiveRecord::RecordInvalid(Validationfa
我正在使用Rails3.1并在一个论坛上工作。我有一个名为Topic的模型,每个模型都有许多Post。当用户创建新主题时,他们也应该创建第一个Post。但是,我不确定如何以相同的形式执行此操作。这是我的代码:classTopic:destroyaccepts_nested_attributes_for:postsvalidates_presence_of:titleendclassPost...但这似乎不起作用。有什么想法吗?谢谢! 最佳答案 @Pablo的回答似乎有你需要的一切。但更具体地说...首先改变你View中的这一行对此#
我正在尝试使用Curbgem执行以下POST以解析云curl-XPOST\-H"X-Parse-Application-Id:PARSE_APP_ID"\-H"X-Parse-REST-API-Key:PARSE_API_KEY"\-H"Content-Type:image/jpeg"\--data-binary'@myPicture.jpg'\https://api.parse.com/1/files/pic.jpg用这个:curl=Curl::Easy.new("https://api.parse.com/1/files/lion.jpg")curl.multipart_form_
无论您是想搭建桌面端、WEB端或者移动端APP应用,HOOPSPlatform组件都可以为您提供弹性的3D集成架构,同时,由工业领域3D技术专家组成的HOOPS技术团队也能为您提供技术支持服务。如果您的客户期望有一种在多个平台(桌面/WEB/APP,而且某些客户端是“瘦”客户端)快速、方便地将数据接入到3D应用系统的解决方案,并且当访问数据时,在各个平台上的性能和用户体验保持一致,HOOPSPlatform将帮助您完成。利用HOOPSPlatform,您可以开发在任何环境下的3D基础应用架构。HOOPSPlatform可以帮您打造3D创新型产品,HOOPSSDK包含的技术有:快速且准确的CAD
我正在编写一个简单的静态Rack应用程序。查看下面的config.ru代码:useRack::Static,:urls=>["/elements","/img","/pages","/users","/css","/js"],:root=>"archive"map'/'dorunProc.new{|env|[200,{'Content-Type'=>'text/html','Cache-Control'=>'public,max-age=6400'},File.open('archive/splash.html',File::RDONLY)]}endmap'/pages/search.
本教程将在Unity3D中混合Optitrack与数据手套的数据流,在人体运动的基础上,添加双手手指部分的运动。双手手背的角度仍由Optitrack提供,数据手套提供双手手指的角度。 01 客户端软件分别安装MotiveBody与MotionVenus并校准人体与数据手套。MotiveBodyMotionVenus数据手套使用、校准流程参照:https://gitee.com/foheart_1/foheart-h1-data-summary.git02 数据转发打开MotiveBody软件的Streaming,开始向Unity3D广播数据;MotionVenus中设置->选项选择Unit