angular解析json数据
生活随笔
收集整理的這篇文章主要介紹了
angular解析json数据
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
這篇文章主要介紹了AngularJS獲取json數(shù)據(jù)的方法,給大家分享一個(gè)簡(jiǎn)單的Demo。
源碼：
<!DOCTYPE html> <html> <head><meta charset="UTF-8"><script type="text/javascript" src="angular-1.3.0.js"></script><title></title><script type="text/javascript">var app = angular.module("myApp", []);app.value("url_book", "book.json");app.value("url_books", "books.json");app.controller("bookCtrl", function ($scope, $http) {$http.get("book.json").then(function (response) {$scope.book = response.data;}, function (response) {console.log(response.status);});});app.controller("booksCtrl", function ($scope, $http) {$http.get("books.json").then(function (response) {$scope.books = response.data;}, function (response) {console.log(response.status);});});</script> </head> <body ng-app="myApp"> <div ng-controller="bookCtrl"><ul><li>ID：{{ book.id }}</li><li>標(biāo)題：{{ book.title }}</li><li>類型：{{ book.type }}</li><li>描述：{{ book.description }}</li><li>圖片：<img src="{{ book.picture }}"/></li><li>是否推薦：{{ book.isRecommend }}</li><li>上架時(shí)間：{{ book.dtCreated }}</li></ul> </div><div ng-controller="booksCtrl"><table border="1"><tr><th>ID</th><th>標(biāo)題</th><th>類型</th><th>描述</th><th>圖片</th><th>推薦</th><th>創(chuàng)建時(shí)間</th></tr><tbody ng-repeat="book in books"><tr><td>{{book.id}}</td><td>{{book.title}}</td><td>{{book.type}}</td><td>{{book.description}}</td><td><img src="{{book.picture}}" width="80px" height="80px"/></td><td><i ng-if="book.isRecommend">是</i><i ng-if="!book.isRecommend">否</i></td><td>{{book.dtCreated}}</td></tr></tbody></table> </div> </body> </html> 實(shí)現(xiàn)效果還需要用到本地的json文件，本文僅供參考
總結(jié)
以上是生活随笔為你收集整理的angular解析json数据的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： bzoj3375[Usaco2004 M
- 下一篇： OC10_代理反向传值