[英]Save object to JSON file in angularjs?
I am new to angularjs and trying create an single page application. 我是angularjs的新手,正在尝试创建一个单页应用程序。 I have a home controller with very simple code.
我有一个非常简单的代码的家庭控制器。 Something along the lines of this tutorial
本教程的内容
Angular JS controller is initialized with code like: Angular JS控制器使用以下代码初始化:
var phonecatApp = angular.module('phonecatApp', []);
phonecatApp.controller('PhoneListCtrl', function ($scope) {
$scope.phones = [
{'name': 'Nexus S',
'_id': 1,
'snippet': 'Fast just got faster with Nexus S.'},
{'name': 'Motorola XOOM™ with Wi-Fi',
'_id': 2,
'snippet': 'The Next, Next Generation tablet.'},
{'name': 'MOTOROLA XOOM™',
'_id': 3,
'snippet': 'The Next, Next Generation tablet.'}
];
});
but in production data might not be so neatly packed. 但是在生产中,数据可能没有那么整齐地打包。 Now my problem is:
现在我的问题是:
Can I create a download link to a JSON representation of my objects? 我可以创建指向我的对象的JSON表示的下载链接吗?
<li ng-repeat="phone in phones">
<a
href="data:text/json;charset=utf-8,{{encodeURIComponent(JSON.stringify(phone))}}"
download="{{phone._id}}.json">
JSON
</a>
</li>
I basically want to access the current object phone
with the formatting function encodeURIComponent(JSON.stringify(phone))
. 我基本上想使用格式函数
encodeURIComponent(JSON.stringify(phone))
访问当前的对象phone
。
Is there a way to do this neatly? 有办法整齐地做到这一点吗?
I basically want to access the current object phone with the formatting function encodeURIComponent(JSON.stringify(phone)).
我基本上想使用格式化函数encodeURIComponent(JSON.stringify(phone))访问当前的对象电话。
You simply add a method to your controller: working example (collections) 您只需在控制器中添加一个方法即可: 工作示例(集合)
$scope.encodeJson = function(phone) {
return encodeURIComponent(JSON.stringify(phone));
}
<a href="data:text/json;charset=utf-8,{{encodeJson(data)}}" download="{{filename}}">
You may also need sanitize the URL 您可能还需要清理URL
For collections it's basically the same: 对于集合,基本上是相同的:
<p ng-repeat="item in collection">
<a href="data:text/json;charset=utf-8,{{encodeJson(item)}}" download="{{item.id}}.json">
</p>
Additionally you may need remove the $$HashKey -added by ng-repeat- by using "track by item.id" syntax in the ng-repeat. 另外,您可能需要使用ng-repeat中的“ track by item.id”语法来删除由ng-repeat添加的$$ HashKey。
Another approach could be add those functions to the $scope
itself and using them inside ng-* attributes. 另一种方法是将这些功能添加到
$scope
本身,并在ng- *属性中使用它们。
$scope.encodeURIComponent = encodeURIComponent;
$scope.JSON = JSON;
Thanks to the suggestions of rnrneverdies I added the following to the config 感谢rnrneverdies的建议,我在配置中添加了以下内容
phonecatApp.config(['$compileProvider', function ($compileProvider) {
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|tel|file|data|blob):/);
}]);
and these functions to the $scope in the controller 并将这些功能传递给控制器中的$ scope
$scope.stripClone = function(obj) {
if (null == obj || "object" != typeof obj) return obj;
var copy = obj.constructor();
for (var attr in obj) {
if (obj.hasOwnProperty(attr) && attr != '$$hashKey') {
var obj_attr = obj[attr];
if (typeof obj_attr == "object"){
copy[attr] = this.stripClone(obj_attr);
} else if (typeof obj_attr == "array"){
copy[attr] =[];
for(var i =0; i<obj_attr.length; i++){
copy[attr].push(this.stripClone(obj_attr));
}
}else{
copy[attr] = obj_attr;
}
}
}
return copy;
};
$scope.myEncodeJson = function(obj){
return JSON.stringify(this.stripClone(obj));
};
I can now call these functions in the template to do the json magic I wanted: 我现在可以在模板中调用这些函数来执行我想要的json魔术:
<a ng-href="data:text/json;charset=utf-8,{{myEncodeJson(phone)}}
Thanks for your help 谢谢你的帮助
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.