Wie wird ein einzelnes Objekt von response.data angezeigt?

Question

Foloowing ist mein Controller für einzelne Buch Details aus der Sammlung von json Aufzeichnungen

.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> 

Anzeige Wie einzelnes Buch Rekord von response.data anzuzeigen; unter Verwendung der oben Controller

Answer 1

Schleife durch die books im äußeren <div>:

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

einen einzelnen Datensatz anzuzeigen (sagen für den Index 0), einfache Verwendung books[0] in der Ansicht:

.. 
    <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 2

Nur nimm das erste Objekt in die Daten,

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

Answer 3

Wenn $scope.books ein Array ist, können Sie

1) Schleife über das Array alle Bücher anzuzeigen

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

2) Anzeige nur ein Buch von seiner Position im Array

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

Answer 4

Wenn $ scope.books ein Array ist, dann können Sie den ng-repeat wie den obigen Code von @mistails verwenden. es wird einfach eine Liste von Büchern dynamisch erstellen. und aus der Liste können Sie ein bestimmtes Buch auswählen und Sie können die ID übergeben, um die gesamten Daten des Buches abzurufen.

<div ng-repeat="b in books" data-ng-click="showBookData(b)"> {{b.title}} <img ng-src="{{b.imgUrl}}" ... </div> showBookData() auf der klicken Sie ein modales öffnen und die gesamten Details zeigen.