Question

我拥有或将拥有大量数据，以javascipt对象的形式表示电影/电视节目数据，其结构如下：

var DVDs = [
    {   "title":"7 Assassins",
        "image":"images/7Assassins.jpg",
        "description":"When gold goes missing in ancient China, royal guards entrusted with its recovery realize they are not the only people in pursuit.",
        "genre":"Action",
        "available":"true",
        "rating":"5",
        "releaseYear":"2013"
    },
    {   "title":"Doctor Who",
        "image":"images/DoctorWho.jpg",
        "description":"The further adventures of the time traveling alien adventurer and his companions.",
        "genre":"Adventure",
        "available":"true",
        "rating":"8",
        "releaseYear":"2005"
    },

我想在表格中显示图像。我有这个代码。

<section ng-app="dvdApp" ng-controller="dvdController">
   <table>
        <tr>
           <td ng-repeat="element in products">
               <img src ="{{element.image}}" height=75%>
           </td>
        </tr>
     </table>
 </section>

正如我所说，这样可以正常工作，除了它只在一行上显示图像。最终我将在数据集中有100张或更多DVD。我希望每个表格行只显示6个左右。所以我的问题是如何在将六个元素添加到当前表格行之后将ng-repeat切换到新行。

修改

我相信我找到了一个答案的帖子

how to split the ng-repeat data with three columns using bootstrap

Answer 1

只需从阵列中获取6条记录，然后显示所有6条记录，确保记录 DVD不是来自x 。并且不要忘记使用 ng-if with $ index％6

<div ng-app="myApp" ng-controller="MyController">
            <table border="1" width="100%">
                <tr ng-repeat="x in DVDs" ng-if="$index % 6 === 0">
                   <td>
                       {{DVDs[$index].title}}
                   </td>

                   <td>
                       {{DVDs[$index+1].title}}
                   </td>

                   <td>
                       {{DVDs[$index+2].title}}
                   </td>

                   <td>
                       {{DVDs[$index+3].title}}
                   </td>

                   <td>
                       {{DVDs[$index+4].title}}
                   </td>

                   <td>
                       {{DVDs[$index+5].title}}
                   </td>
                </tr>
            </table>
    </div>

<script>
var app = angular.module('myApp', ['ngDragDrop']);

app.controller('MyController', function ($scope,$http,$sce) 
{
    $scope.DVDs = [
    {   
        "title":"7 Assassins",
        "image":"images/7Assassins.jpg",
        "description":"When gold goes missing in ancient China, royal guards entrusted with its recovery realize they are not the only people in pursuit.",
        "genre":"Action",
        "available":"true",
        "rating":"5",
        "releaseYear":"2013"
    },
    {   "title":"Doctor Who",
        "image":"images/DoctorWho.jpg",
        "description":"The further adventures of the time traveling alien adventurer and his companions.",
        "genre":"Adventure",
        "available":"true",
        "rating":"8",
        "releaseYear":"2005"
    },
    {   "title":"Doctor Who",
        "image":"images/DoctorWho.jpg",
        "description":"The further adventures of the time traveling alien adventurer and his companions.",
        "genre":"Adventure",
        "available":"true",
        "rating":"8",
        "releaseYear":"2005"
    },
    {   "title":"Doctor Who",
        "image":"images/DoctorWho.jpg",
        "description":"The further adventures of the time traveling alien adventurer and his companions.",
        "genre":"Adventure",
        "available":"true",
        "rating":"8",
        "releaseYear":"2005"
    },
    {   "title":"Doctor Who",
        "image":"images/DoctorWho.jpg",
        "description":"The further adventures of the time traveling alien adventurer and his companions.",
        "genre":"Adventure",
        "available":"true",
        "rating":"8",
        "releaseYear":"2005"
    },
    {   "title":"Doctor Who",
        "image":"images/DoctorWho.jpg",
        "description":"The further adventures of the time traveling alien adventurer and his companions.",
        "genre":"Adventure",
        "available":"true",
        "rating":"8",
        "releaseYear":"2005"
    },
    {   "title":"Doctor Who",
        "image":"images/DoctorWho.jpg",
        "description":"The further adventures of the time traveling alien adventurer and his companions.",
        "genre":"Adventure",
        "available":"true",
        "rating":"8",
        "releaseYear":"2005"
    },
    {   "title":"Doctor Who",
        "image":"images/DoctorWho.jpg",
        "description":"The further adventures of the time traveling alien adventurer and his companions.",
        "genre":"Adventure",
        "available":"true",
        "rating":"8",
        "releaseYear":"2005"
    },
    {   "title":"Doctor Who",
        "image":"images/DoctorWho.jpg",
        "description":"The further adventures of the time traveling alien adventurer and his companions.",
        "genre":"Adventure",
        "available":"true",
        "rating":"8",
        "releaseYear":"2005"
    },
    {   "title":"Doctor Who",
        "image":"images/DoctorWho.jpg",
        "description":"The further adventures of the time traveling alien adventurer and his companions.",
        "genre":"Adventure",
        "available":"true",
        "rating":"8",
        "releaseYear":"2005"
    }

    ];
});

</script>

Answer 2

如果某个模块不适合您，我已成功使用ng-table

我可以让ng-repeat转到新的表格行

2 个答案: