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 indexOf函数使用说明
Jul 03 Javascript
Jquery升级新版本后选择器的语法问题
Jun 02 Javascript
JS获取URL中参数值(QueryString)的4种方法分享
Apr 12 Javascript
Jquery仿IGoogle实现可拖动窗口示例代码
Aug 22 Javascript
JS JQUERY实现滚动条自动滚到底的方法
Jan 09 Javascript
jQuery简单入门示例之用户校验demo示例
Jul 09 Javascript
zepto与jquery的区别及zepto的不同使用8条小结
Jul 28 Javascript
浅析Javascript的自动分号插入(ASI)机制
Sep 29 Javascript
vue.js事件处理器是什么
Mar 20 Javascript
Vuex之理解Mutations的用法实例
Apr 19 Javascript
JavaScript设计模式之装饰者模式定义与应用示例
Jul 25 Javascript
js中复选框的取值及赋值示例详解
Oct 18 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学习 字符串课件
2008/06/15 PHP
php xml实例 留言本
2009/03/20 PHP
php中json_encode中文编码问题分析
2011/09/13 PHP
php中unlink()、mkdir()、rmdir()等方法的使用介绍
2012/12/21 PHP
PHP实现事件机制实例分析
2015/06/26 PHP
php实现点击可刷新验证码
2015/11/07 PHP
浅析PHP中的闭包和匿名函数
2017/12/25 PHP
laravel框架查询数据集转为数组的两种方法
2019/10/10 PHP
CSS+Jquery实现页面圆角框方法大全
2009/12/24 Javascript
JavaScript 未结束的字符串常量常见解决方法
2010/01/24 Javascript
JavaScript中创建对象和继承示例解读
2014/02/12 Javascript
浅析jquery的js图表组件highcharts
2014/03/06 Javascript
全面解析JS字符串和正则表达式中的match、replace、exec等函数
2016/07/01 Javascript
js仿腾讯QQ的web登陆界面
2016/08/19 Javascript
vue2笔记 — vue-router路由懒加载的实现
2017/03/03 Javascript
ReactNative列表ListView的用法
2017/08/02 Javascript
Javascript将图片的绝对路径转换为base64编码的方法
2018/01/11 Javascript
详解Chai.js断言库API中文文档
2018/01/31 Javascript
JavaScript怎样在删除前添加确认弹出框?
2019/05/27 Javascript
vuecli3.x中轻松4步带你使用tinymce的步骤
2020/06/25 Javascript
Python实现FTP上传文件或文件夹实例(递归)
2017/01/16 Python
Python PyQt5实现的简易计算器功能示例
2017/08/23 Python
Python闭包之返回函数的函数用法示例
2018/01/27 Python
Python操作mongodb数据库的方法详解
2018/12/08 Python
PyQT5 QTableView显示绑定数据的实例详解
2019/06/25 Python
pytorch中index_select()的用法详解
2021/01/06 Python
python利用opencv实现颜色检测
2021/02/23 Python
HTML5中的网络存储实现方式
2020/04/28 HTML / CSS
英国男士时尚网站:Dandy Fellow
2018/02/09 全球购物
信息管理专业学生自荐信格式
2013/09/22 职场文书
2014升学宴答谢词
2014/01/26 职场文书
小学开学典礼主持词
2014/03/19 职场文书
个人批评与自我批评材料
2014/10/17 职场文书
山楂树之恋观后感
2015/06/11 职场文书
选调生挂职锻炼工作总结
2015/10/23 职场文书
OpenCV-Python实现图像平滑处理操作
2021/06/08 Python