4

I have, or will have a large set of data that represents movie/TV show data in the form of a javascipt object structured like this:

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 the images in a table. I have that working 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 fine except it only displays the images on one row. Eventually I will have 100 or more DVDs in the data set. I would like show only 6 or so per table row. So my questions is how to make ng-repeat switch to a new row after six elements have been added the the current table row.

EDIT

I believe I have found a post with the answer

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

Community
  • 1
  • 1
Per Larsen
  • 1,149
  • 3
  • 12
  • 25
  • handle it at your data level. Create a master array of elements, each containing max of six (or whatever is the requirement) entries. Then do a nested ng-repeat over this nested array Is this what you want or something else? – Akshat Singhal Feb 09 '16 at 05:23

2 Answers2

0

Just take 6 record as once from array and display all 6 be sure you have take record DVDs not from x. and dont forgot use 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>
Paresh Gami
  • 4,777
  • 5
  • 23
  • 41
0

If a module is not opbjectionable to you I have had success with ng-table

Jeremythuff
  • 1,518
  • 2
  • 13
  • 35