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 作用域与作用域链详解
Apr 07 Javascript
JS利用cookie记忆当前位置的防刷新导航效果
Oct 15 Javascript
Knockout自定义绑定创建方法
Dec 26 Javascript
vue动态组件实现选项卡切换效果
Mar 08 Javascript
微信小程序之购物车功能
Sep 23 Javascript
基于Vue的文字跑马灯组件(npm 组件包)
May 24 Javascript
Vue的MVVM实现方法
Aug 16 Javascript
微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】
Dec 06 Javascript
javascript数据结构之多叉树经典操作示例【创建、添加、遍历、移除等】
Aug 01 Javascript
vue 的 solt 子组件过滤过程解析
Sep 07 Javascript
react国际化化插件react-i18n-auto使用详解
Mar 31 Javascript
javascript用defineProperty实现简单的双向绑定方法
Apr 03 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的几个常用数字判断函数代码
2012/04/24 PHP
PHP+Ajax检测用户名或邮件注册时是否已经存在实例教程
2014/08/23 PHP
PHP精确到毫秒秒杀倒计时实例详解
2019/03/14 PHP
Aster vs KG BO3 第二场2.18
2021/03/10 DOTA
javascript与asp.net(c#)互相调用方法
2009/12/13 Javascript
JavaScript的setAttribute兼容性问题解决方法
2013/11/11 Javascript
百度移动版的url编码解码示例
2014/04/29 Javascript
readonly和disabled属性的区别
2015/07/26 Javascript
使用jquery实现的循环连续可停顿滚动实例
2016/11/23 Javascript
JavaScript fetch接口案例解析
2018/08/30 Javascript
vue项目在安卓低版本机显示空白的原因分析(两种)
2018/09/04 Javascript
vue给组件传递不同的值方法
2018/09/29 Javascript
微信小程序购物车、父子组件传值及calc的注意事项总结
2018/11/14 Javascript
原生js实现抽奖小游戏
2019/06/27 Javascript
vue实现登录拦截
2020/06/29 Javascript
Python的MongoDB模块PyMongo操作方法集锦
2016/01/05 Python
Python 创建空的list,以及append用法讲解
2018/05/04 Python
Python实现获取nginx服务器ip及流量统计信息功能示例
2018/05/18 Python
Python中.join()和os.path.join()两个函数的用法详解
2018/06/11 Python
python调用百度REST API实现语音识别
2018/08/30 Python
对Python3.x版本print函数左右对齐详解
2018/12/22 Python
PyCharm常用配置和常用插件(小结)
2021/02/06 Python
世界上最大的在线汽车租赁预订平台:Rentalcars.com(支持中文)
2018/10/12 全球购物
Eagle Eyes Optics鹰眼光学:高性能太阳镜
2018/12/07 全球购物
澳大利亚当地社区首选的光学商店:1001 Optical
2019/08/24 全球购物
一组SQL面试题
2016/02/15 面试题
优秀团员自我评价范文
2014/04/23 职场文书
党员公开承诺书内容
2014/05/20 职场文书
个人承诺书格式
2014/06/03 职场文书
解放思想大讨论活动心得体会
2014/09/11 职场文书
党员个人剖析材料(四风问题)
2014/10/07 职场文书
2015学校六五普法工作总结
2015/04/22 职场文书
员工工作表扬信
2015/05/05 职场文书
二十年同学聚会致辞
2015/07/28 职场文书
html form表单基础入门案例讲解
2021/07/15 HTML / CSS
Python学习之异常中的finally使用详解
2022/03/16 Python