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

工作 JS 小提琴

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

对于这个结果

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>