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 相关文章推荐
event.srcElement+表格应用
Aug 29 Javascript
JavaScript 页面编码与浏览器类型判断代码
Jun 03 Javascript
node.js中的fs.existsSync方法使用说明
Dec 17 Javascript
一款基于jQuery的图片场景标注提示弹窗特效
Jan 05 Javascript
对比分析AngularJS中的$http.post与jQuery.post的区别
Feb 27 Javascript
jQuery实现的在线答题功能
Apr 12 Javascript
angularjs客户端实现压缩图片文件并上传实例
Jul 06 Javascript
jQuery实现进度条效果代码
Dec 17 Javascript
基于HTML+CSS,jQuery编写的简易计算器后续(添加了键盘监听)
Jan 05 Javascript
AngularJS ng-mousedown 指令
Aug 02 Javascript
微信小程序之ES6与事项助手的功能实现
Nov 30 Javascript
详解如何快速配置webpack多入口脚手架
Dec 28 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
《雄兵连》系列首部大电影《烈阳天道》:可能是因为期望值太高了
2020/08/18 国漫
php 生成饼图 三维饼图
2009/09/28 PHP
php获取服务器端mac和客户端mac的地址支持WIN/LINUX
2014/05/15 PHP
php json相关函数用法示例
2017/03/28 PHP
thinkphp5 框架结合plupload实现图片批量上传功能示例
2020/04/04 PHP
(JS实现)MapBar中坐标的加密和解密的脚本
2007/05/16 Javascript
Jquery 返回json数据在IE浏览器中提示下载的问题
2014/05/18 Javascript
JavaScript分页功能的实现方法
2015/04/25 Javascript
JavaScript实现点击按钮直接打印
2016/01/06 Javascript
JavaScript进阶练习及简单实例分析
2016/06/03 Javascript
JQuery控制DIV的选取实现方法
2016/09/18 Javascript
Bootstrap BootstrapDialog使用详解
2017/02/17 Javascript
PHP实现本地图片上传和验证功能
2017/02/27 Javascript
Bootstrap fileinput组件封装及使用详解
2017/03/10 Javascript
从零开始学习Node.js系列教程一:http get和post用法分析
2017/04/13 Javascript
ES6学习笔记之正则表达式和字符串正则方法分析
2017/04/25 Javascript
JS/HTML5游戏常用算法之路径搜索算法 随机迷宫算法详解【普里姆算法】
2018/12/13 Javascript
小程序如何使用分包加载的实现方法
2019/05/22 Javascript
vue通过数据过滤实现表格合并
2020/11/30 Javascript
JS实现扫码枪扫描二维码功能
2020/01/03 Javascript
javascript实现留言板功能
2020/02/08 Javascript
[02:16]完美世界DOTA2联赛PWL S3 集锦第三期
2020/12/21 DOTA
Python 多核并行计算的示例代码
2017/11/07 Python
Python中defaultdict与lambda表达式用法实例小结
2018/04/09 Python
深入浅析Python传值与传址
2018/07/10 Python
DES加密解密算法之python实现版(图文并茂)
2018/12/06 Python
Python下载网易云歌单歌曲的示例代码
2020/08/12 Python
Kmeans均值聚类算法原理以及Python如何实现
2020/09/26 Python
利用CSS3实现炫酷的飞机起飞动画
2016/09/17 HTML / CSS
Jabra捷波朗美国官网:用于办公、车载和运动的无线蓝牙耳麦
2017/02/01 全球购物
超市促销活动总结
2014/07/01 职场文书
k-means & DBSCAN 总结
2021/04/27 Python
分析Java中Map的遍历性能问题
2021/06/26 Java/Android
Python 类,对象,数据分类,函数参数传递详解
2021/09/25 Python
Vue的生命周期一起来看看
2022/02/24 Vue.js
Apache Linkis 中间件架构及快速安装步骤
2022/03/16 Servers