2017-04-04 29 views
0

Foloowing是我从JSON记录如何从response.data显示单个对象?

.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一本书的记录集显示一本书的细节控制器;在外<div>使用上述控制器

回答

0

循环遍历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> 
+0

我想从对象数组中只显示一个书的详细信息 –

0

刚取数据中的第一个对象,

$scope.book = response.data[0]; 
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}}"/> 
+0

如果我遵循上面的代码,它总是显示相同的结果......它应该在选择特定的书的详细信息时动态地改变它应该只显示特定的书全部细节 –

+0

@Bikshus好的,但是哪一个?你如何选择一本书来展示? – Mistalis

+0

.STATE( 'bookdetails',{ URL: “/ API /信息/:ID”, 控制器: “BookDetailsController”, templateUrl: “视图/书details.html” }) View Details通过使用该UI -sref –

0

如果$ scope.books是一个数组,那么您可以使用ng-repeat作为@mistails的上述代码。它会动态地创建书籍列表。并从列表中选择特定的书籍,然后可以通过该ID来获取书籍的全部数据。

<div ng-repeat="b in books" data-ng-click="showBookData(b)"> {{b.title}} <img ng-src="{{b.imgUrl}}" ... </div> showBookData() 关于点击你可以打开一个模式并显示总的细节。