我是AngularJS的新手,此时仍然在玩它。为了自学这些概念,我正在处理一些手工构建的JSON文件。
我首先使用它来构建弹出式javascript菜单的元素,在控制器访问JSON文件的列表元素上使用ng-repeat。这工作得很好。然后我尝试在一个不同的JSON文件上重复一个相当复杂的表行结构,并使用稍微复杂的数据模型。在运行时,这会返回一个注释,就像上一个实验一样,但没有元素可以与它一起使用。
我使用两个控制器作为一个应用程序的一部分。我认为问题可能在于如何访问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>
答案 0 :(得分:1)
你已经提到过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>
答案 1 :(得分:0)
好的,我发现某些标记无效但我认为您的代码因为标记无效而中断:<span class="hide2" id="{{book.id1}"}>See Description</span>
,更改为<span class="hide2" id="{{book.id1}}">See Description</span>