AngularJS - 使用单个 ng-repeat 显示复杂的 JSON 数据

Question

我正在尝试展示某个系列的所有书籍。我使用了嵌套的 ng-repeat，效果很好。但是，由于最近布局要求的一些变化，我不能使用嵌套的 ng-repeat（我想要一个单一的书籍列表）。我希望像下面这样的东西

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

有没有办法用 1 ng-repeat 做到这一点？还是用其他方法？ （即数组）

数据

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

控制器

$scope.serieslist = data.records;

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>

Answer 1

既然你只想要一个书单，试试这个

<div ng-repeat="series in serieslist">
        <li>                  
            <div>{{series.name}}</div>
            <div>{{series.book[0].name}}</div>
        </li>            
    </ul>
</div>

希望对你有帮助！！！

Answer 2

您需要先在控制器中将数组展平为具有序列号和书号的数组，然后在新数组上使用 ng-repeat。

为此，您可以在原始数组上使用两个 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++;
    });

这是plnkr

Answer 3

Working JS fiddle

只需替换 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>

或

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

for this result

Answer 4

您可以使用 underscorejs 之类的东西来生成列表的扁平化版本，然后对其进行 ng-repeat。有关如何做到这一点，请在此处参考 Karl 对此 stackoverflow 问题的回答：How to flatten with ng-repeat

Answer 5

控制器

$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

<ul ng-repeat="book in flatbooklist">
    <li>
        <div>{{book.seriesname}}</div>
        <div>{{book.bookname}}</div>
    </li>
</ul>