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 相关文章推荐
javascript获取当前鼠标坐标的方法
Jan 10 Javascript
JS+DIV实现鼠标划过切换层效果的方法
May 25 Javascript
JavaScript框架是什么?怎样才能叫做框架?
Jul 01 Javascript
JS实现黑色风格的网页TAB选项卡效果代码
Oct 09 Javascript
基于JavaScript实现瀑布流布局(二)
Jan 26 Javascript
JavaScript的==运算详解
Jul 20 Javascript
获取IE浏览器Cookie信息的方法
Jan 23 Javascript
详解jQuery中关于Ajax的几个常用的函数
Jul 17 jQuery
vuejs事件中心管理组件间的通信详解
Aug 09 Javascript
vue组件之Alert的实现代码
Oct 17 Javascript
JavaScript实现表单注册、表单验证、运算符功能
Oct 15 Javascript
JS实现textarea通过换行或者回车把多行数字分割成数组并且去掉数组中空的值
Oct 29 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学习之数组值的操作
2011/04/17 PHP
php实现下载限制速度示例分享
2014/02/13 PHP
php实现图片等比例缩放代码
2015/07/23 PHP
mac系统下为 php 添加 pcntl 扩展
2016/08/28 PHP
aspx中利用js实现确认删除代码
2010/07/22 Javascript
XMLHTTPRequest的属性和方法简介
2010/11/23 Javascript
js切换光标示例代码
2013/10/10 Javascript
JS组件Bootstrap Table表格行拖拽效果实现代码
2020/08/27 Javascript
JQuery的常用选择器、过滤器、方法全面介绍
2016/05/25 Javascript
jQuery Ajax 全局调用封装实例代码详解
2016/06/02 Javascript
简单实现js页面切换功能
2021/01/10 Javascript
把多个JavaScript函数绑定到onload事件处理函数上的方法
2016/09/04 Javascript
移动端滑动插件Swipe教程
2016/10/16 Javascript
基于JavaScript实现Tab选项卡切换效果
2016/11/24 Javascript
Vue系列:通过vue-router如何传递参数示例
2017/01/16 Javascript
vue axios用法教程详解
2017/07/23 Javascript
微信小程序报错:this.setData is not a function的解决办法
2017/09/27 Javascript
jQuery中的for循环var与let的区别
2018/04/21 jQuery
clipboard在vue中的使用的方法示例
2018/10/19 Javascript
Vue关于组件化开发知识点详解
2020/05/13 Javascript
详解JavaScript中的数据类型,以及检测数据类型的方法
2020/09/17 Javascript
[01:23:45]DOTA2-DPC中国联赛 正赛 CDEC vs Dragon BO3 第一场 1月22日
2021/03/11 DOTA
Python简单实现TCP包发送十六进制数据的方法
2016/04/16 Python
Python3使用requests登录人人影视网站的方法
2016/05/11 Python
巧用python和libnmapd,提取Nmap扫描结果
2016/08/23 Python
scrapy爬虫完整实例
2018/01/25 Python
python IDLE添加行号显示教程
2020/04/25 Python
使用Python爬虫爬取小红书完完整整的全过程
2021/01/19 Python
阿姆斯特丹城市卡:Amsterdam Pass
2019/12/01 全球购物
动物学专业毕业生求职信
2013/10/11 职场文书
外语系毕业生找工作的求职信
2013/11/28 职场文书
节能环保演讲稿
2014/08/28 职场文书
教师考核表个人总结
2015/02/12 职场文书
2015年学校图书室工作总结
2015/05/19 职场文书
Python词云的正确实现方法实例
2021/05/08 Python
一起来看看Vue的核心原理剖析
2022/03/24 Vue.js