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

Yous应该使用<div ng-app='myApp' ng-controller='myController as vm'>你也应该将嵌套循环放在第一个div中，然后访问对子项进行ng-repeat。

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

<强>样本

＆＃13;

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"
        ]
      }
    ]
  }
];
});

＆＃13;

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

＆＃13;

如何从嵌套的JSON响应Angular.js列出项目（渲染）

1 个答案: