Javascript AngularJS-通过单个ng重复显示复杂的JSON数据

我正试图展示某系列的所有书籍。我使用嵌套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>

---

控制器

$scope.serieslist = data.records;

$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

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

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

{{series.name}
{{book.name}

由于您只需要一个图书列表，请尝试以下操作

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

{{series.name}
{{series.book[0].name}

希望这有帮助

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

{{series.name}
{{book.name}

或

{{series.name}的{{book.name}

---

您可以使用类似下划线的方法生成列表的展开版本，然后在上面重复。要了解如何做到这一点，请参考Karl在这里对stackoverflow问题的回答：

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

为此，可以在原始数组上使用两个angular.forEach（一个用于本系列，另一个用于每个系列中的书籍）

---

这是一个控制器

$scope.serieslist = data.records;

$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

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

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

{{book.seriesname}
{{book.bookname}

您希望结果如何？。请提供所需的HTML结构（非嵌套）。如果我理解正确，您将需要使用

ng repeat start

和

ng repeat end

以获得一个扁平的HTML结构。但是如果没有新的HTML结构，就无法写出具体的答案。这个

{{series.name}{{series.book[0].name}怎么样

这是我所期望的

• 系列1第一册第二册
• 系列2第二册
• 系列3第二册
• 谢谢你的回答。我刚刚试过，它只显示系列名称和每个系列的第一本书的名称谢谢你的回答。这看起来像我目前的方法。我的问题是如何仅使用1个ng repeat来实现，因为嵌套的ng repeat将生成多个列表，这使得在控制器中使用angular.foreach实现line wrapMaybe非常困难，但对于我来说，使用一个ng repeat是不可能的，在任何情况下都需要循环，因为有两个阵列感谢您的精彩回答。它工作完美无瑕。我非常感谢你的回答。这就是我想要的。我使用forEach of Angular而不是for loop，它可以工作。