我如何從嵌套的JSON響應中列出項目（呈現）Angular.js

Question

我的主控制器返回這個，這就是我看到的。 這列出了我的作者和評級明星，我想包括每個作者的標題。我試過但沒有爲我工作，我在想什麼？

[ 
    { 
    "_id": "58dd21c3cb77090b930b6063", 
    "bookAuthor": "George Orwell", 
    "titles": [ 
     { 
     "title": "Animal Farm", 
     "_id": "58dd3f2701cc081056135dae", 
     "reviews": [ 
      { 
      "author": "Lisa", 
      "rating": 4, 
      "reviewText": "this is a review", 
      "_id": "58dd8e13876c0f16b17cd7dc", 
      "createdOn": "2017-03-30T23:00:35.662Z" 
      } 
     ], 
     "favouredBy": [ 
      "bb, aa, cc" 
     ] 
     }, 
     { 
     "title": "1984", 
     "_id": "58dd42a59f12f110d1756f08", 
     "reviews": [ 
      { 
      "author": "jessy", 
      "rating": 5, 
      "reviewText": "REVIEW FOR SECOND TITLE", 
      "_id": "58dd8ef46d4aaa16e4545c76", 
      "createdOn": "2017-03-30T23:04:20.609Z" 
      } 
     ], 
     "favouredBy": [ 
      "all" 
     ] 
     } 
    ] 
    } 
] 

，並有我的home.view.html

<navigation></navigation> 
<div class="container"> 
    <page-header content="vm.pageHeader"></page-header> 
    <div class="row"> 
     <div class="col-xs-12 col-sm-8"> 
     <div class="error">{{ vm.message }}</div> 
     <div class="row list-group"> 
      <div class="col-xs-12 list-group-item" ng-repeat="book in vm.data.books | filter : textFilter"> 
       <h4> 
        <small class="rating-stars" rating-stars rating="book.rating"></small> 
       </h4> 
       <p class="Author">{{ book.bookAuthor }}</p> 
      </div> 
      <div class="col-xs-12 list-group-item2" ng-repeat="book in vm.data.books | filter : textFilter"> 
       <h4> 
        { book.titles.title }} 
       </h4> 
      </div> 
     </div> 
     </div> 
     <div class="col-xs-12 col-sm-4"> 
     <p class="lead">{{ vm.sidebar.content }}</p> 
     </div> 
    </div> 
    <footer-generic></footer-generic> 
</div> 

Answer 1

你要跟應該使用<div ng-app='myApp' ng-controller='myController as vm'>也是你應該把第一個div，然後進入裏面的嵌套循環做了NG-重複的子項。

<div ng-repeat="eachbook in book.titles"> 

DEMO

var myApp=angular.module('myApp',[]) 
 
myApp.controller('myController',function(){ 
 
    this.data={}; 
 
    this.data.books= [ 
 
    { 
 
    "_id": "58dd21c3cb77090b930b6063", 
 
    "bookAuthor": "George Orwell", 
 
    "titles": [ 
 
     { 
 
     "title": "Animal Farm", 
 
     "_id": "58dd3f2701cc081056135dae", 
 
     "reviews": [ 
 
      { 
 
      "author": "Lisa", 
 
      "rating": 4, 
 
      "reviewText": "this is a review", 
 
      "_id": "58dd8e13876c0f16b17cd7dc", 
 
      "createdOn": "2017-03-30T23:00:35.662Z" 
 
      } 
 
     ], 
 
     "favouredBy": [ 
 
      "bb, aa, cc" 
 
     ] 
 
     }, 
 
     { 
 
     "title": "1984", 
 
     "_id": "58dd42a59f12f110d1756f08", 
 
     "reviews": [ 
 
      { 
 
      "author": "jessy", 
 
      "rating": 5, 
 
      "reviewText": "REVIEW FOR SECOND TITLE", 
 
      "_id": "58dd8ef46d4aaa16e4545c76", 
 
      "createdOn": "2017-03-30T23:04:20.609Z" 
 
      } 
 
     ], 
 
     "favouredBy": [ 
 
      "all" 
 
     ] 
 
     } 
 
    ] 
 
    } 
 
]; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
<div ng-app='myApp' ng-controller='myController as vm'> 
 
    <div class="row"> 
 
     <div class="row list-group"> 
 
      <div class="col-xs-12 list-group-item" ng-repeat="book in vm.data.books | filter : textFilter"> 
 
       <h4> 
 
        <small class="rating-stars" rating-stars rating="book.rating"></small> {{book.bookAuthor}} 
 
       </h4> 
 
       <div ng-repeat="eachbook in book.titles"> 
 
        <ul> 
 
         <li> 
 
          {{eachbook.title}} 
 
         </li> 
 
        </ul> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>