Can I make ng-repeat go to a new row in the table

I have or will have a large dataset that represents movie / TV show data as a javascipt object, structured as follows:

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"
    },

I want to show images in a table. I have work with this code.

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

As I said, this works great, except that it only displays images on a single line. In the end, I will have 100 or more DVDs in the data set. I would like to show only 6 or so in the row of the table. So my questions are: how to switch ng-repeat to a new row after adding six elements to the current row of the table.

EDIT

I believe that I found a response message

how to split ng-repeat data into three columns using bootstrap

+4
2

6 6, , DVD- x. ng-if $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>
0
0

Source: https://habr.com/ru/post/1627899/


All Articles