angular.fromJson與toJson方法用法示例
本文實(shí)例講述了angular.fromJson與toJson方法用法。分享給大家供大家參考,具體如下:
AngularJS的angular.fromJson()方法可以把一個(gè)Json字符串中解析成一個(gè)對(duì)象,或?qū)ο髷?shù)組:
<!DOCTYPE html>
<html ng-app="App">
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/angular.js"></script>
<script type="text/javascript">
angular.module("App", [])
.controller("parseController", function($scope)
{
$scope.parse = function()
{
var json = '{"name":"liSi", "password":"321"}';
var jsonArr = '[{"name":"zhangSan", "password":"123"},{"name":"liSi", "password":"321"}]';
var obj = angular.fromJson(json);
console.log(obj.name);
var objArr = angular.fromJson(jsonArr);
console.log(objArr[0].name);
console.log(objArr[1].password);
}
});
</script>
</head>
<body>
<div ng-controller="parseController">
<button ng-click="parse()">點(diǎn)擊我!</button>
</div>
</body>
</html>
控制臺(tái)打印的結(jié)果如下:
liSi zhangSan 321
相應(yīng)地,能夠從Json到對(duì)象,就能夠從對(duì)象到Json:
var obj =
{
name:"liSi", password:"321"
}
var str = angular.toJson(obj, true);
console.log(str);
打印結(jié)果如下:
{
"name": "liSi",
"password": "321"
}
PS:關(guān)于json操作,這里再為大家推薦幾款比較實(shí)用的json在線工具供大家參考使用:
在線JSON代碼檢驗(yàn)、檢驗(yàn)、美化、格式化工具:
http://tools.jb51.net/code/json
JSON在線格式化工具:
http://tools.jb51.net/code/jsonformat
在線XML/JSON互相轉(zhuǎn)換工具:
http://tools.jb51.net/code/xmljson
json代碼在線格式化/美化/壓縮/編輯/轉(zhuǎn)換工具:
http://tools.jb51.net/code/jsoncodeformat
在線json壓縮/轉(zhuǎn)義工具:
http://tools.jb51.net/code/json_yasuo_trans
更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《AngularJS指令操作技巧總結(jié)》、《AngularJS入門(mén)與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》
希望本文所述對(duì)大家AngularJS程序設(shè)計(jì)有所幫助。
- Angularjs根據(jù)json文件動(dòng)態(tài)生成路由狀態(tài)的實(shí)現(xiàn)方法
- Angular使用$http.jsonp發(fā)送跨站請(qǐng)求的方法
- 使用AngularJS 跨站請(qǐng)求如何解決jsonp請(qǐng)求問(wèn)題
- AngularJS中的JSONP實(shí)例解析
- AngularJS實(shí)現(xiàn)動(dòng)態(tài)添加Option的方法
- AngularJS+bootstrap實(shí)現(xiàn)動(dòng)態(tài)選擇商品功能示例
- AngularJS實(shí)現(xiàn)的回到頂部指令功能實(shí)例
- AngularJS自定義指令實(shí)現(xiàn)面包屑功能完整實(shí)例
- AngularJS使用攔截器實(shí)現(xiàn)的loading功能完整實(shí)例
- AngularJs 常用的過(guò)濾器
相關(guān)文章
angular6的table組件開(kāi)發(fā)的實(shí)現(xiàn)示例
這篇文章主要介紹了angular6的table組件開(kāi)發(fā)的實(shí)現(xiàn)示例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12
使用Raygun來(lái)自動(dòng)追蹤AngularJS中的異常
這篇文章主要介紹了使用Raygun來(lái)自動(dòng)追蹤AngularJS中的異常,AngularJS是一款高人氣的JavaScript庫(kù),需要的朋友可以參考下2015-06-06
Facade Service暴露commands簡(jiǎn)化代碼邏輯提高可訪問(wèn)性組合性
在 Angular 應(yīng)用開(kāi)發(fā)中,使用 Facade Service 暴露 commands(命令)以及訂閱這些 commands 是一個(gè)常見(jiàn)的設(shè)計(jì)模式,本文將詳細(xì)介紹在 Facade Service 中如何實(shí)現(xiàn)這一目標(biāo),并深入探討相關(guān)細(xì)節(jié),以及通過(guò)實(shí)際示例進(jìn)行說(shuō)明2023-10-10
詳解angularjs中如何實(shí)現(xiàn)控制器和指令之間交互
本篇文章主要介紹了詳解angularjs中如何實(shí)現(xiàn)控制器和指令之間交互,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-05-05
簡(jiǎn)單談?wù)剅equire模塊化jquery和angular的問(wèn)題
下面小編就為大家?guī)?lái)一篇簡(jiǎn)單談?wù)剅equire模塊化jquery和angular的問(wèn)題。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06
AngularJS 簡(jiǎn)單應(yīng)用實(shí)例
本文主要介紹AngularJS 的簡(jiǎn)單應(yīng)用實(shí)例,這里對(duì)AngularJS的知識(shí)總結(jié),并提供實(shí)例代碼和應(yīng)用程序講解,有需要的小伙伴可以參考下2016-07-07
詳解為Angular.js內(nèi)置$http服務(wù)添加攔截器的方法
所謂攔截器就是在目標(biāo)達(dá)到目的地之前對(duì)其進(jìn)行處理以便處理結(jié)果更加符合我們的預(yù)期。Angular的$http攔截器是通過(guò)$httpProvider.interceptors數(shù)組定義的一組攔截器,每個(gè)攔截器都是實(shí)現(xiàn)了某些特定方法的Factory。本文就介紹了為Angular.js內(nèi)置$http服務(wù)添加攔截器的方法。2016-12-12
解決angular的$http.post()提交數(shù)據(jù)時(shí)后臺(tái)接收不到參數(shù)值問(wèn)題的方法
這篇文章為大家分享了解決angular的$http.post()提交數(shù)據(jù)時(shí)后臺(tái)接收不到參數(shù)值問(wèn)題的方法,感興趣的小伙伴們可以參考一下2015-12-12
對(duì)Angular.js Controller如何進(jìn)行單元測(cè)試
這篇文章主要給大家介紹了如何對(duì)Angular Controller進(jìn)行單頁(yè)測(cè)試。如果你不太了解angular也沒(méi)關(guān)系,本文也會(huì)提及關(guān)于Angular的一些知識(shí)。文中通過(guò)示例代碼介紹的很詳細(xì),詳細(xì)對(duì)大家的理解和學(xué)習(xí)很有幫助,下面來(lái)一起看看吧。2016-10-10
AngularJs unit-testing(單元測(cè)試)詳解
本文主要介紹AngularJs unit-testing(單元測(cè)試)的內(nèi)容,這里整理了單元測(cè)試的知識(shí),及示例代碼,有興趣的朋友可以參考下2016-09-09

