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 相关文章推荐
解决js正则匹配换行问题实现代码
Dec 10 Javascript
图标线性回归斜着移动到指定的位置
Aug 16 Javascript
js使用数组判断提交数据是否存在相同数据
Nov 27 Javascript
jQuery中:checkbox选择器用法实例
Jan 03 Javascript
在JavaScript中处理时间之setMinutes()方法的使用
Jun 11 Javascript
新闻上下滚动jquery 超简洁(必看篇)
Jan 21 Javascript
Node.JS中事件轮询(Event Loop)的解析
Feb 25 Javascript
详谈jQuery中使用attr(), prop(), val()获取value的异同
Apr 25 jQuery
javascript 日期相减-在线教程(附代码)
Aug 17 Javascript
vue里input根据value改变背景色的实例
Sep 29 Javascript
vue 微信分享回调iOS和安卓回调出现错误的解决
Sep 07 Javascript
vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作
Sep 10 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小技巧搜集,每个PHPer都来露一手
2007/01/02 PHP
php并发对MYSQL造成压力的解决方法
2013/02/21 PHP
ThinkPHP 3.2 版本升级了哪些内容
2015/03/05 PHP
Centos7安装swoole扩展操作示例
2020/03/26 PHP
jQuery实现的多选框多级联动插件
2014/05/02 Javascript
Javascript 绘制 sin 曲线过程附图
2014/08/21 Javascript
jquery实现拖拽调整Div大小
2015/01/30 Javascript
js实现文本框中输入文字页面中div层同步获取文本框内容的方法
2015/03/03 Javascript
jQuery实现区域打印功能代码详解
2016/06/17 Javascript
easyui combotree加载静态数据问题(选不上)解决方法
2016/12/26 Javascript
nodejs连接mysql数据库简单封装示例-mysql模块
2017/04/10 NodeJs
JavaScript实现网页头部进度条刷新
2017/04/16 Javascript
实现微信小程序的wxml文件和wxss文件在webstrom的支持
2017/06/12 Javascript
javascript代码优化的8点总结
2018/01/29 Javascript
详解Vue CLI3 多页应用实践和源码设计
2018/08/30 Javascript
Vue指令v-for遍历输出JavaScript数组及json对象的常见方式小结
2019/02/11 Javascript
Angular脚手架开发的实现步骤
2019/04/09 Javascript
跟老齐学Python之赋值,简单也不简单
2014/09/24 Python
使用Python装饰器在Django框架下去除冗余代码的教程
2015/04/16 Python
matlab中实现矩阵删除一行或一列的方法
2018/04/04 Python
python使用Turtle库绘制动态钟表
2018/11/19 Python
python实现图片插入文字
2019/11/26 Python
使用 Python 合并多个格式一致的 Excel 文件(推荐)
2019/12/09 Python
在Keras中CNN联合LSTM进行分类实例
2020/06/29 Python
15个Pythonic的代码示例(值得收藏)
2020/10/29 Python
美国最大的珠宝首饰网上商城:Jewelry.com
2016/07/22 全球购物
Bath & Body Works阿联酋:在线购买沐浴和身体用品
2021/02/27 全球购物
英文简历中的自荐信范文
2013/12/14 职场文书
高一物理教学反思
2014/01/24 职场文书
建议书标准格式
2014/03/12 职场文书
2014年重阳节活动策划方案书
2014/09/16 职场文书
2014年高数考试作弊检讨书
2014/12/14 职场文书
指导老师鉴定意见
2015/06/05 职场文书
车间班组长竞聘书
2015/09/15 职场文书
《合作意向书》怎么写?
2019/08/20 职场文书
JavaScript流程控制(循环)
2021/12/06 Javascript