Ng-Repeat 不重复（或 return 任何东西）

Question

我是 AngularJS 的新手，目前仍在使用它。为了自学这些概念，我正在处理一些手工构建的 JSON 文件。

我首先使用它来构建弹出式 javascript 菜单的元素，方法是在控制器访问 JSON 文件的列表元素上使用 ng-repeat。效果很好。然后我尝试 ng-repeat 一个相当复杂的 table 行结构在一个不同的 JSON 文件上，具有稍微复杂的数据模型。在运行时，这 returns 一条评论，与之前的实验一样，但没有与之相关的元素。

我在一个应用程序中使用两个控制器。我认为问题可能在于如何访问 JSON 文件中的数据。

不包括 CSS，因为我认为不会影响它。 'MenuCtrl' 控制器仍然正常运行（在整个页面的元素上调用了 ng-app），所以我只包括我认为相关的 HTML.

controllers.js:

  var profileApp = angular.module('profileApp', []);
  profileApp.controller('BookCtrl', function ($scope, $http){
    $http.get('books.json').success(function(data) {
      $scope.bookItems = data;
    });
  });
  profileApp.controller('MenuCtrl', function ($scope, $http){
    $http.get('profile.json').success(function(data) {
      $scope.profileItems = data;
    });
  });

books.json:

[
  {
"title": "The Design of Everyday Things",
"author": "Donald Norman",
"img": "img/norman.jpg",
"isbn": "",
"description":".",
"id1": "hoverA",
"id2": "hover1"
  },
  {
"title": "Plans and Situated Actions",
"author": "Lucille Suchman",
"img": "img/planssitu.jpg",
"isbn": "",
"description":".",
"id1": "hoverB",
"id2": "hover2"
  },
  {
"title": "Where The Action Is",
"author": "Paul Dourish",
"img": "img/wheretheaction.jpg",
"isbn": "",
"description":".",
"id1": "hoverC",
"id2": "hover3"
  },
  {
"title": "Information Processing and Human-Machine Interaction",
"author": "Jens Rasmussen",
"img": "img/rasmussen.jpg",
"isbn": "",
"description":".",  
"id1": "hoverD",
"id2": "hover4"
  },
  {
"title": "The Imaginary App",
"author": "Paul D. Miller and Svitlana Matviyenko",
"img": "img/imaginary.jpg",
"isbn": "",
"description":".",
"id1": "hoverE",
"id2": "hover5"
  },
  {
"title": "The Gutenberg Galaxy",
"author": "Marshall Mcluhan",
"img": "img/guten.jpg",
"isbn": "",
"description":".",
"id1": "hoverF",
"id2": "hover6"
  }
]

HTML的相关部分：

<div  align="center">
<p class="central">Bibliography</br></p></br>
<table class="content1" ng-controller="BookCtrl" >
    <colgroup>
        <col span="1" class="col1">
        <col span="1.5" class="col2">
    </colgroup>
    <tbody ng-repeat="book in bookItems" >
    <tr >
        <td align="center"><div class="center"><div class="round3"><a href=""><img class="book" ng-src="{{book.img}}"></img></a></div></div></td>
        <td></td>
        <td class="wrapword" style="padding-left:10px;"><p><span class="content2"><strong>{{book.title}}</strong></span>
            <span class="small2">{{book.author}}</br>
            <span class="hide2" id="{{book.id1}"}>See Description</span>
            <span class="hide" id="{{book.id2}}">{{book.description}}</span>
            </span>
        </p></td>
    </tr>
    </tbody>
</table>
</div>

检查运行页面的元素时得到的结果：

<table class="content1 ng-scope" ng-controller="BookCtrl">
    <colgroup>
        <col span="1" class="col1">
        <col span="1.5" class="col2">
    </colgroup>
    <!-- ngRepeat: book in bookItems -->
</table>

Answer 1

好的，我看到一些无效的标记，但我认为您的代码因无效标记而中断：<span class="hide2" id="{{book.id1}"}>See Description</span>，更改为 <span class="hide2" id="{{book.id1}}">See Description</span>

Answer 2

您提到过，在 TBODY 中执行 ng-repeat，我已更正。现在应该可以了。

<div  align="center">
<p class="central">Bibliography</br></p></br>
<table class="content1" ng-controller="BookCtrl" >
    <colgroup>
        <col span="1" class="col1">
        <col span="1.5" class="col2">
    </colgroup>
    <tbody  >
    <tr ng-repeat="book in bookItems">
        <td align="center"><div class="center"><div class="round3"><a href=""><img class="book" ng-src="{{book.img}}"></img></a></div></div></td>
        <td></td>
        <td class="wrapword" style="padding-left:10px;"><p><span class="content2"><strong>{{book.title}}</strong></span>
            <span class="small2">{{book.author}}</br>
            <span class="hide2" id="{{book.id1}"}>See Description</span>
            <span class="hide" id="{{book.id2}}">{{book.description}}</span>
            </span>
        </p></td>
    </tr>
    </tbody>
</table>
</div>

Ng-Repeat 不重复（或 return 任何东西）

Ng-Repeat does not repeat (or return anything)

javascript

html

json

angularjs

ng-repeat