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之通用简单的table选项卡实现(二)
May 09 Javascript
JQuery为页面Dom元素绑定事件及解除绑定方法
Apr 23 Javascript
特殊情况下如何获取span里面的值
May 20 Javascript
node.js应用后台守护进程管理器Forever安装和使用实例
Jun 01 Javascript
jquery实现图片上传之前预览的方法
Jul 11 Javascript
VUE实现表单元素双向绑定(总结)
Aug 08 Javascript
JS实现瀑布流布局
Oct 21 Javascript
浅谈Vue 性能优化之深挖数组
Dec 11 Javascript
JS实现的A*寻路算法详解
Dec 14 Javascript
vue自定义switch开关组件,实现样式可自行更改
Nov 01 Javascript
使用vue实现一个电子签名组件的示例代码
Jan 06 Javascript
微信小程序 bindtap 传参的实例代码
Feb 21 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/09/07 PHP
mysql_connect localhost和127.0.0.1的区别(网络层阐述)
2015/03/26 PHP
php使用scandir()函数扫描指定目录下所有文件示例
2019/06/08 PHP
浅谈Javascript 执行顺序
2013/12/18 Javascript
Ubuntu中搭建Nodejs开发环境过程分享
2014/06/01 NodeJs
JQuery中的事件及动画用法实例
2015/01/26 Javascript
跟我学习javascript的prototype原型和原型链
2015/11/18 Javascript
JavaScript中三种异步上传文件方式
2016/03/06 Javascript
微信小程序开发(二)图片上传+服务端接收详解
2017/01/11 Javascript
Async Validator 异步验证使用说明
2017/07/03 Javascript
vue-cli3环境变量与分环境打包的方法示例
2019/02/18 Javascript
解决Vue在Tomcat8下部署页面不加载的问题
2019/11/12 Javascript
vue 实现把路由单独分离出来
2020/08/13 Javascript
Vue项目利用axios请求接口下载excel
2020/11/17 Vue.js
JavaScript函数柯里化实现原理及过程
2020/12/02 Javascript
Python实现简单截取中文字符串的方法
2015/06/15 Python
jupyter安装小结
2016/03/13 Python
对Python进行数据分析_关于Package的安装问题
2017/05/22 Python
python实现csv格式文件转为asc格式文件的方法
2018/03/23 Python
pygame实现俄罗斯方块游戏(基础篇2)
2019/10/29 Python
浅析python内置模块collections
2019/11/15 Python
Python键鼠操作自动化库PyAutoGUI简介(小结)
2020/05/17 Python
Python参数传递及收集机制原理解析
2020/06/05 Python
CSS3 函数技巧 用css 实现js实现的事情(clac Counters Tooltip)
2017/08/15 HTML / CSS
不开辟用于交换数据的临时空间,如何完成字符串的逆序
2012/12/02 面试题
经典c++面试题三
2015/07/08 面试题
2013年大学生的自我鉴定
2013/10/24 职场文书
个人求职信范例
2014/01/29 职场文书
教师个人自我评价范文
2014/04/13 职场文书
教师竞聘上岗演讲稿
2014/09/03 职场文书
医德医风自我评价
2014/09/19 职场文书
公民授权委托书
2014/10/15 职场文书
具结保证书
2015/01/17 职场文书
MySQL Shell的介绍以及安装
2021/04/24 MySQL
使用javascript解析二维码的三种方式
2021/11/11 Javascript
MySQL高级进阶sql语句总结大全
2022/03/16 MySQL