我正在学习MEAN,我试图显示来自对象的信息,它具有2个数组,它可以正常工作,因为我可以看到带有Javascript控制台日志的对象,但是它没有显示在html中。
我的代码来自javascript(books.js)
var myApp = angular.module('myApp');
myApp.controller('BooksController', ['$scope', '$http', '$location', '$routeParams',function($scope, $http, $location, $routeParams){
console.log("BooksController loaded");
$scope.getBooks = function(){
$http.get('/api/books')
.then(function(response){
console.log(response)
$scope.books = response;
});
}
}]);
我的代码来自html(book.html)
<div class="panel panel-default" ng-init="getBooks()">
<div class="panel-heading">
<h3 class="panel-title">Latest Books</h3>
</div>
<div class="panel-body">
<div class="row">
<div ng-repeat="book in books">
<div class="col-md-3">
<div class="col-md-6">
{{book.title}}
<p>
{{book.description}}
</p>
</div>
<div class="col-md-6">
<img src="{{book.image_url}}" />
</div>
</div>
</div>
</div>
</div>
</div>
通过控制台获取数据的图像
Screenshot of object
问题是我不知道如何解决它,因为它没有显示在book.html中。
Screenshot of book.html
我希望有一个人可以帮助我。
谢谢你的帮助。
最佳答案
您的问题是响应的分配-应该是:
$scope.books = response.data;
请注意,您必须在控制台中如何扩展
data
才能看到阵列-因为您的响应是一个对象,包含data
作为阵列的键。