[英]AngularJS - Display complex JSON data with a single ng-repeat
I am trying to display all the books of some series.我正在尝试显示某个系列的所有书籍。 I used nested ng-repeat and it works well.
我使用了嵌套的 ng-repeat,效果很好。 However, due to some recent changes on layout requirements, I cannot use nested ng-repeat (I want a single list of books).
但是,由于布局要求最近发生了一些变化,我不能使用嵌套的 ng-repeat(我想要一个书籍列表)。 I would expect something like below
我希望像下面这样
<ul>
<li>book1 of series1</li>
<li>book 2 of series 1</li>
<li>book1 of series 2</li>
<li>book2 of series 2</li>
<li>book1 of series 3</li>
<li>book2 of series 3</li>
</ul>
Is there a way to do it with 1 ng-repeat?有没有办法用 1 ng-repeat 做到这一点? Or with other approach?
还是用其他方法? (Ie Array)
(即数组)
Data数据
var data = {
"records": [
{
"name": "Spectrum Series",
"seriesid": "SpectrumSeries",
"book": [
{
"name": "White Curse",
"bookid": "WhiteCurse",
"image": "book1"
},
{
"name": "Blue Fox",
"bookid": "BlueFox",
"image": "book2"
}
]
}
… other series
]
};
Controller控制器
$scope.serieslist = data.records;
HTML HTML
<div ng-repeat="series in serieslist">
<ul ng-repeat="book in series.book">
<li>
<div>{{series.name}}</div>
<div>{{book.name}}</div>
</li>
</ul>
</div>
Since you want only one list of books, try this既然你只想要一个书单,试试这个
<div ng-repeat="series in serieslist">
<li>
<div>{{series.name}}</div>
<div>{{series.book[0].name}}</div>
</li>
</ul>
</div>
Hope this helps!!!希望这可以帮助!!!
You need to flatten the array first in your controller into an array with series number and book number, and then use the ng-repeat on the new array.您需要先将控制器中的数组展平为具有序列号和书号的数组,然后在新数组上使用 ng-repeat。
To do that you can use two angular.forEach on the original array (one for the series and other for the books in each series).为此,您可以在原始数组上使用两个 angular.forEach(一个用于系列,另一个用于每个系列中的书籍)。
$scope.serieslist = [];
var seriesNumber = 1;
angular.forEach(data.records, function(series) {
var bookNumber = 1;
angular.forEach(series.book, function(book) {
$scope.serieslist.push(
{
seriesNumber: seriesNumber,
bookNumber: bookNumber++,
seriesid: series.seriesid,
name: series.name,
book: book
});
});
seriesNumber++;
});
Just replace element of DOM for use nested ng-repeat
只需替换 DOM 元素以使用嵌套的
ng-repeat
<div ng-app='Your app'>
<div ng-controller='Your controlelr'>
<ul ng-repeat="series in serieslist">
{{series.name}}
<li ng-repeat="book in series.book" >{{ book.name }}</li>
</ul>
</div>
</div>
or或者
<div ng-app='myApp'>
<div ng-controller='Home'>
<ul ng-repeat="series in serieslist">
<li ng-repeat="book in series.book" >{{ book.name }} of {{series.name}}</li>
</ul>
</div>
</div>
You can use something like underscorejs to produce a flattened version of your list and then ng-repeat over that.您可以使用 underscorejs 之类的东西来生成列表的扁平版本,然后 ng-repeat 。 For how you might do that, refer to Karl's answer on this stackoverflow question here: How to flatten with ng-repeat
有关如何执行此操作,请参阅 Karl 在此 stackoverflow 问题上的回答: How to flatten with ng-repeat
Controller控制器
$scope.serieslist = data.records;
$scope.flatbooklist = [];
angular.forEach($scope.serieslist, function (series)
{
angular.forEach(series.book, function (book)
{
$scope.flatbooklist.push({seriesname: series.name, seriesid: series.seriesid, bookname: book.name, bookid: book.bookid, bookimage: book.image});
});
});
HTML HTML
<ul ng-repeat="book in flatbooklist">
<li>
<div>{{book.seriesname}}</div>
<div>{{book.bookname}}</div>
</li>
</ul>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.