angularJs中json数据转换与本地存储的实例


Posted in Javascript onOctober 08, 2018

1.html:把json对象转换成json字符串

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <script src="angular.min.js"></script>
</head>
<body>
 <div ng-app="module" ng-controller="ctrl">
 {{data}}
 </div>
 <script>
 var m = angular.module('module', []);
 m.controller('ctrl', ['$scope', function ($scope) {
  $scope.data = {'name': '泠泠在路上'};
  //把json对象转换成json字符串
  localStorage.setItem('data', angular.toJson($scope.data));
 }]);
 </script>
</body>
</html>

2.html:字符串转换成json对象

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <script src="angular.min.js"></script>
</head>
<body>
<div ng-app="module" ng-controller="ctrl">
 {{data.name}}
</div>
<script>
 var m = angular.module('module', []);
 m.controller('ctrl', ['$scope', function ($scope) {
  //alert出字符串
  alert(localStorage.getItem('data'));
  //字符串转换成json对象
  $scope.data =angular.fromJson(localStorage.getItem('data'));
 }]);
</script>
</body>
</html>

3.html字符串转换成json对象

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <script src="angular.min.js"></script>
</head>
<body>
<div ng-app="module" ng-controller="ctrl">
 {{data.username}}
</div>
<script>
 var m = angular.module('module', []);
 m.controller('ctrl', ['$scope', function ($scope) {
 //字符串转换成json对象
  $scope.data = angular.fromJson('{"username":"泠泠在路上"}');
 }]);
</script>
</body>
</html>

以上这篇angularJs中json数据转换与本地存储的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery常见开发技巧详细整理
Jan 02 Javascript
js生成动态表格并为每个单元格添加单击事件的方法
Apr 14 Javascript
JavaScript中getUTCMinutes()方法的使用详解
Jun 10 Javascript
浅析BootStrap栅格系统
Jun 07 Javascript
js实现横向拖拽导航条功能
Feb 17 Javascript
老生常谈js中0到底是 true 还是 false
Mar 08 Javascript
高性能的javascript之加载顺序与执行原理篇
Jan 14 Javascript
vue实现的仿淘宝购物车功能详解
Jan 27 Javascript
详解微信小程序-扫一扫 wx.scanCode() 扫码大变身
Apr 30 Javascript
vue项目初始化到登录login页面的示例
Oct 31 Javascript
vue实例的选项总结
Jun 09 Javascript
js+css3实现简单时钟特效
Sep 13 Javascript
JS中验证整数和小数的正则表达式
Oct 08 #Javascript
webpack@v4升级踩坑(小结)
Oct 08 #Javascript
npm scripts 使用指南详解
Oct 08 #Javascript
webpack4.0 入门实践教程
Oct 08 #Javascript
vue实现一个炫酷的日历组件
Oct 08 #Javascript
angularJs利用$scope处理升降序的方法
Oct 08 #Javascript
Nuxt升级2.0.0时出现的问题(小结)
Oct 08 #Javascript
You might like
PHP生成月历代码
2007/06/14 PHP
PHP+Mysql+jQuery实现发布微博程序 php篇
2015/10/15 PHP
PHP5.6新增加的可变函数参数用法分析
2017/08/25 PHP
Firefox 无法获取cssRules 的解决办法
2006/10/11 Javascript
JavaScript函数、方法、对象代码
2008/10/29 Javascript
firefox下对ajax的onreadystatechange的支持情况分析
2009/12/14 Javascript
Javascript动态绑定事件的简单实现代码
2010/12/25 Javascript
document.getElementBy(&quot;id&quot;)与$(&quot;#id&quot;)有什么区别
2013/09/22 Javascript
js脚本获取webform服务器控件的方法
2014/05/16 Javascript
js+HTML5实现canvas多种颜色渐变效果的方法
2015/06/05 Javascript
JQuery自动触发事件的方法
2015/06/13 Javascript
js操作table元素实现表格行列新增、删除技巧总结
2015/11/18 Javascript
JS中取二维数组中最大值的方法汇总
2016/04/17 Javascript
Javascript快速实现浏览器系统通知
2017/08/26 Javascript
webpack引入eslint配置详解
2018/01/22 Javascript
使用vue-cli创建项目的图文教程(新手入门篇)
2018/05/02 Javascript
JS使用tween.js动画库实现轮播图并且有切换功能
2018/07/17 Javascript
JavaScript fetch接口案例解析
2018/08/30 Javascript
vue实现点击隐藏与显示实例分享
2019/02/13 Javascript
浏览器JavaScript调试功能无法使用解决方案
2020/09/18 Javascript
Django自定义认证方式用法示例
2017/06/23 Python
Python入门Anaconda和Pycharm的安装和配置详解
2019/07/16 Python
python爬虫中多线程的使用详解
2019/09/23 Python
python KNN算法实现鸢尾花数据集分类
2019/10/24 Python
Python使用Opencv实现图像特征检测与匹配的方法
2019/10/30 Python
几款主流好用的富文本编辑器(所见即所得常用编辑器)介绍
2021/03/17 Javascript
CSS3 animation实现逐帧动画效果
2016/06/02 HTML / CSS
html5通过canvas实现刮刮卡效果示例分享
2014/01/27 HTML / CSS
手工制作的意大利皮革运动鞋:KOIO
2020/01/05 全球购物
网络维护中文求职信
2014/01/03 职场文书
音乐专业自荐信
2014/02/07 职场文书
政府班子四风问题整改措施
2014/10/04 职场文书
民事赔偿协议书
2014/11/02 职场文书
司考复习计划
2015/01/19 职场文书
2015年学校教研室主任工作总结
2015/07/20 职场文书
爱国主题班会教案
2015/08/14 职场文书