如何显示来自response.data的单个对象？

Question

Foloowing是我的控制器，用于显示JSON记录集合中的单本书详细信息

.controller('BookDetailsController', ['$scope','$http','$stateParams',function($scope,$http,$stateParams){
        $http({
            url: "/api/books/",
            method: "get",
            params: {id: $stateParams.id}
        }).then(function(response){
            $scope.books = response.data;
            console.log($scope.books);

        })
}]);

<div class="panel panel-default">
    <div class="panel-heading">Online Bookstore</div>
    <div class="panel-body">
    <div class="col-md-12">
        <div class="col-md-3">
        <img src="{{book.imgUrl}}" class="img-thumbnail" width="200" height="200">
        </div>
        <div class="col-md-9">
            <h2>{{book.title}}</h2>
            <p style="text-align:justify;">{{book.description}}</p>
        </div>
    </div>
    <hr>
    </div>
  </div>

如何显示来自response.data的单本书记录； 使用上面的控制器

Answer 1

如果$scope.books是一个数组，则可以

1）遍历数组以显示所有书籍

<div ng-repeat="b in books">
    {{b.title}}
    <img ng-src="{{b.imgUrl}}"
    ...
</div> 

2）从阵列中的位置仅显示一本书

<h1>First book</h1>
{{books[0].title}}
<img ng-src="{{books[0].imgUrl}}"/>

Answer 2

循环浏览外部<div>的books ：

....
<div class="col-md-12" ng-repeat="book in books">
....

要显示一条记录（比如说索引0 ），可以在视图中简单使用books[0] ：

  ..
  <img src="{{books[0].imgUrl}}" class="img-thumbnail" width="200" height="200">
</div>
<div class="col-md-9">
  <h2>{{books[0].title}}</h2>
  <p style="text-align:justify;">{{books[0].description}}</p>
</div>

Answer 3

只需将数据中的第一个对象，

$scope.book = response.data[0];

Answer 4

如果$ scope.books是一个数组，则可以使用@mistails将ng-repeat用作上述代码。 它会简单地动态创建书籍清单。 然后从列表中选择特定的书，然后可以传递ID来获取书的全部数据。

<div ng-repeat="b in books" data-ng-click="showBookData(b)"> {{b.title}} <img ng-src="{{b.imgUrl}}" ... </div> showBookData（）上的单击，您可以打开一个模态并显示总详细信息。