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停止输出代码
Jul 20 Javascript
使用ExtJS技术实现的拖动树结点
Aug 05 Javascript
node.js中的fs.close方法使用说明
Dec 17 Javascript
AngularJS包括详解及示例代码
Aug 17 Javascript
微信小程序 form组件详解及简单实例
Jan 10 Javascript
微信小程序 出现47001 data format error原因解决办法
Mar 10 Javascript
BootStrap数据表格实例代码
Sep 13 Javascript
微信小程序实现tab和swiper切换结合效果
Jul 17 Javascript
微信小程序实现左右列表联动
May 19 Javascript
node获取客户端ip功能简单示例
Aug 24 Javascript
JS常用正则表达式超全集(密码强度校验,金额校验,IE版本,IPv4,IPv6校验)
Feb 03 Javascript
vue-cli —— 如何局部修改Element样式
Oct 22 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 empty函数 使用说明
2009/08/10 PHP
使用PHP会话(Session)实现用户登陆功能
2013/06/29 PHP
ThinkPHP中URL路径访问与模块控制器之间的关系
2014/08/23 PHP
jQuery+Ajax+PHP“喜欢”评级功能实现代码
2015/10/08 PHP
php利用imagemagick实现复古老照片效果实例
2017/02/16 PHP
php 猴子摘桃的算法
2017/06/20 PHP
客户端 使用XML DOM加载json数据的方法
2010/09/28 Javascript
js一般方法改写成面向对象方法的无限级折叠菜单示例代码
2013/07/04 Javascript
浅析Javascript使用include/require
2013/11/13 Javascript
jQuery简单注册和禁用全局事件的方法
2016/07/25 Javascript
Angularjs手动解析表达式($parse)
2016/10/12 Javascript
jQuery之动画效果大全
2016/11/09 Javascript
JavaScript获取短信验证码(周期性)
2016/12/29 Javascript
js监听input输入框值的实时变化实例
2017/01/26 Javascript
jQuery实现在新增加的元素上添加事件方法案例分析
2017/02/09 Javascript
javascript中mouseenter与mouseover的异同
2017/06/06 Javascript
Angular2环境搭建具体操作步骤(推荐)
2017/08/04 Javascript
浅谈Webpack 持久化缓存实践
2018/03/22 Javascript
vue2.0+koa2+mongodb实现注册登录
2018/04/10 Javascript
微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件
2018/11/16 Javascript
jQuery利用FormData上传文件实现批量上传
2018/12/04 jQuery
Vue快速实现通用表单验证的示例代码
2020/01/09 Javascript
[33:42]LGD vs OG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
用Pytorch训练CNN(数据集MNIST,使用GPU的方法)
2019/08/19 Python
Python 实用技巧之利用Shell通配符做字符串匹配
2019/08/23 Python
python实现画出e指数函数的图像
2019/11/21 Python
python GUI库图形界面开发之PyQt5动态加载QSS样式文件
2020/02/25 Python
Python+Opencv身份证号码区域提取及识别实现
2020/08/25 Python
德国高性价比网上药店:medpex
2017/07/09 全球购物
英国领先的互联网葡萄酒礼品商:Vintage Wine & Port
2019/05/24 全球购物
古驰英国官网:GUCCI英国
2020/03/07 全球购物
红旗方阵解说词
2014/02/12 职场文书
新娘父亲婚礼致辞
2015/07/27 职场文书
2016新党章学习心得体会
2016/01/15 职场文书
Python获取百度热搜的完整代码
2021/04/07 Python
javascript canvas实现雨滴效果
2021/06/09 Javascript