您的位置：首页 > 理论基础 > 计算机网络

angularjs $http请求--图书

2017-10-16 07:48 232 查看

<!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.controller("bookCtrl", function ($scope, $http) {
$http({
method: "GET",
url: "book.json"
}).success(function (data, status, headers, config) {
$scope.book = data;
}).error(function (data, status, headers, config) {
console.log(status);
});
});

app.controller("bookListCtrl", function ($scope, $http) {
$http({
method: "GET",
url: "books.json"
}).success(function (data, status, headers, config) {
$scope.books = data;
}).error(function (data, status, headers, config) {
console.log(status);
});
});
</script>
</head>
<body ng-app="myApp">
<div ng-controller="bookCtrl">
<ul>
<li>ID：{{ book.id }}</li>
<li>标题：{{ book.title }}</li>
<li>类型：{{ book.type }}</li>
<li>描述：{{ book.description }}</li>
<li>图片：<img src="{{ book.picture }}" /></li>
<li>是否推荐：{{ book.isRecommend }}</li>
<li>上架时间：{{ book.dtCreated }}</li>
</ul>
</div>

<div ng-controller="bookListCtrl">
<table border="1">
<tr>
<th>NO</th>
<th>ID</th>
<th>标题</th>
<th>是否推荐</th>
<th>价格</th>
</tr>
<tbody ng-repeat="book in books">
<tr>
<td>{{$index}}</td>
<td>{{book.id}}</td>
<td>{{book.title}}</td>
<td>
<i ng-if="book.isRecommend">是</i>
<i ng-if="!book.isRecommend">否</i>
</td>
<td>{{book.price}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航