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 相关文章推荐
前端开发的开始---基于面向对象的Ajax类
Sep 17 Javascript
jQuery timers计时器简单应用说明
Oct 28 Javascript
jquery 单击li防止重复加载的实现代码
Dec 24 Javascript
基于jQuery实现的Ajax 验证用户名是否存在的实现代码
Apr 06 Javascript
由Javascript实现的页面日历
Nov 04 Javascript
基于OO的动画附加插件,可以实现弹跳、渐隐等动画效果 分享
Jun 24 Javascript
获取下拉列表框的值是数组,split,$.inArray示例
Nov 13 Javascript
javascript框架设计之类工厂
Jun 23 Javascript
基于jquery实现图片放大功能
May 07 Javascript
完美的js div拖拽实例代码
Sep 24 Javascript
Angular设置别名alias的方法
Nov 08 Javascript
基于JS实现父组件的请求服务过程解析
Oct 14 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代码飞起来的40条小技巧(提升php效率)
2010/04/12 PHP
php记录代码执行时间(实现代码)
2013/07/05 PHP
PHP实现根据浏览器跳转不同语言页面代码
2013/08/02 PHP
ThinkPHP实现一键清除缓存方法
2014/06/26 PHP
制作个性化的WordPress登陆界面的实例教程
2016/05/21 PHP
PHP设计模式之模板模式定义与用法详解
2018/12/20 PHP
PHP xpath提取网页数据内容代码解析
2020/07/16 PHP
Js的MessageBox
2006/12/03 Javascript
可以浮动某个物体的jquery控件用法实例
2015/07/24 Javascript
基于JavaScript实现快速转换文本语言(繁体中文和简体中文)
2016/03/07 Javascript
微信小程序 数组中的push与concat的区别
2017/01/05 Javascript
利用JS实现文字的聚合动画效果
2017/01/22 Javascript
node.js操作MongoDB的实例详解
2017/10/11 Javascript
vue富文本框(插入文本、图片、视频)的使用及问题小结
2018/08/17 Javascript
nodejs中用npm初始化来创建package.json的实例讲解
2018/10/10 NodeJs
js实现导航跟随效果
2018/11/17 Javascript
微信小程序实现动态显示和隐藏某个控件功能示例
2018/12/14 Javascript
vue接入腾讯防水墙代码
2019/05/07 Javascript
详解为element-ui的Select和Cascader添加弹层底部操作按钮
2020/02/07 Javascript
JS实现放大镜效果
2020/09/21 Javascript
在Vue中使用mockjs代码实例
2020/11/25 Vue.js
Python 实现删除某路径下文件及文件夹的实例讲解
2018/04/24 Python
Python简单实现网页内容抓取功能示例
2018/06/07 Python
python字典改变value值方法总结
2019/06/21 Python
webapp字号大小跟随系统字号大小缩放的示例代码
2018/12/26 HTML / CSS
北美大型运动类产品商城:Champs Sports
2017/01/12 全球购物
美国折扣香水网站:The Perfume Spot
2020/12/12 全球购物
Perfume’s Club美国官网:西班牙第一家在线美容店
2020/06/10 全球购物
商务英语专业应届毕业生求职信
2013/10/28 职场文书
综合办公室主任岗位职责
2014/04/13 职场文书
医药销售自荐书
2014/05/29 职场文书
学前班幼儿评语大全
2014/12/29 职场文书
机器人瓦力观后感
2015/06/12 职场文书
小学教代会开幕词
2016/03/04 职场文书
vue配置型表格基于el-table拓展之table-plus组件
2022/04/12 Vue.js
baselines示例程序train_cartpole.py的ImportError
2022/05/20 Python