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限制文本框为整数和货币的函数代码
Oct 13 Javascript
js动态在form上插入enctype=multipart/form-data的问题
May 24 Javascript
经过绑定元素时会多次触发mouseover和mouseout事件
Feb 28 Javascript
javascript实现2048游戏示例
May 04 Javascript
JavaScript的函数式编程基础指南
Mar 19 Javascript
关于JS 预解释的相关理解
Jun 28 Javascript
JS中的==运算: [''] == false —&gt;true
Jul 24 Javascript
JS中substring与substr的用法
Nov 16 Javascript
jquery处理checkbox(复选框)是否被选中实例代码
Jun 12 jQuery
ReactNative之键盘Keyboard的弹出与消失示例
Jul 11 Javascript
原生JavaScript实现轮播图
Jan 10 Javascript
JavaScript流程控制(循环)
Dec 06 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下获取客户端ip地址的函数
2010/03/15 PHP
采用thinkphp自带方法生成静态html文件详解
2014/06/13 PHP
thinkPHP批量删除的实现方法分析
2016/11/09 PHP
谈谈php对接芝麻信用踩的坑
2016/12/01 PHP
PHP实现单例模式建立数据库连接的方法分析
2020/02/11 PHP
关于可运行代码无法正常执行的使用说明
2010/05/13 Javascript
jQuery函数的第二个参数获取指定上下文中的DOM元素
2014/05/19 Javascript
jQuery选择器之基本选择器与层次选择器
2015/03/03 Javascript
JavaScript控制按钮可用或不可用的方法
2015/04/03 Javascript
Node.js中的process.nextTick使用实例
2015/06/25 Javascript
JavaScript实现倒计时跳转页面功能【实用】
2016/12/13 Javascript
详解jQuery的表单验证插件--Validation
2016/12/21 Javascript
详解Vue监听数据变化原理
2017/03/08 Javascript
微信小程序联网请求的轮播图
2017/07/07 Javascript
不使用 JS 匿名函数理由
2017/11/17 Javascript
vue页面切换过渡transition效果
2018/10/08 Javascript
详解可以用在VS Code中的正则表达式小技巧
2019/05/14 Javascript
vue 使用lodash实现对象数组深拷贝操作
2020/09/10 Javascript
python实现的希尔排序算法实例
2015/07/01 Python
python利用拉链法实现字典方法示例
2017/03/25 Python
Python3实战之爬虫抓取网易云音乐的热门评论
2017/10/09 Python
Odoo中如何生成唯一不重复的序列号详解
2018/02/10 Python
python分治法求二维数组局部峰值方法
2018/04/03 Python
Python2.7 实现引入自己写的类方法
2018/04/29 Python
python使用梯度下降和牛顿法寻找Rosenbrock函数最小值实例
2020/04/02 Python
如何在Python3中使用telnetlib模块连接网络设备
2020/09/21 Python
英国运动服、设备及配件网站:DW Sports
2019/12/04 全球购物
C#实现对任一张表的数据进行增,删,改,查要求,运用Webservice,体现出三层架构
2014/07/11 面试题
中式餐厅创业计划书范文
2014/01/23 职场文书
努力学习演讲稿
2014/05/10 职场文书
优秀应届毕业生自荐书
2014/06/29 职场文书
解除劳动合同协议书范本
2014/09/13 职场文书
2015年农村党员干部主题教育活动总结
2015/03/25 职场文书
入伍通知书
2015/04/23 职场文书
论文评审意见
2015/06/05 职场文书
pytorch中[..., 0]的用法说明
2021/05/20 Python