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>