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

您可以使用类似下划线的内容来生成列表的扁平化版本，然后对其进行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>

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

5 个答案: