How to achieve pagination/table layout with Angular.js?

Question

Let's say I receive an object literal with 15+ objects and I need to display them in a nice layout (not all in a row), what is the most efficient method for controlling when the line should break/page should end?

Right now I'm using ng-repeat on table row's, and the result is a long thin table with one column.

Edit for clarification. Could have objects within objects/more params. Here is my object:

$scope.zones = [         {"name": "Zone 1",          "activity": "1"},         {"name": "Zone 2",          "activity": "1"},         {"name": "Zone 3",          "activity": "0"},         {"name": "Zone 4",          "activity": "0"},         {"name": "Zone 5",          "activity": "0"},         {"name": "Zone 6",          "activity": "0"},         {"name": "Zone 7",          "activity": "1"},         {"name": "Zone 8",          "activity": "0"},         {"name": "Zone 9",          "activity": "0"},         {"name": "Zone 10",          "activity": "0"},         {"name": "Zone 11",          "activity": "1"},         {"name": "Zone 12",          "activity": "1"},         {"name": "Zone 13",          "activity": "0"},         {"name": "Zone 14",          "activity": "0"},         {"name": "Zone 15",          "activity": "1"},     ]; 

Answer 1

I would use table and implement the pagination in the controller to control how much is shown and buttons to move to the next page. This Fiddle might help you.

 <table class="table table-striped table-condensed table-hover">                 <thead>                     <tr>                         <th class="id">Id&nbsp;<a ng-click="sort_by('id')"><i class="icon-sort"></i></a></th>                         <th class="name">Name&nbsp;<a ng-click="sort_by('name')"><i class="icon-sort"></i></a></th>                         <th class="description">Description&nbsp;<a ng-click="sort_by('description')"><i class="icon-sort"></i></a></th>                         <th class="field3">Field 3&nbsp;<a ng-click="sort_by('field3')"><i class="icon-sort"></i></a></th>                         <th class="field4">Field 4&nbsp;<a ng-click="sort_by('field4')"><i class="icon-sort"></i></a></th>                         <th class="field5">Field 5&nbsp;<a ng-click="sort_by('field5')"><i class="icon-sort"></i></a></th>                     </tr>                 </thead>                 <tfoot>                     <td colspan="6">                         <div class="pagination pull-right">                             <ul>                                 <li ng-class="{disabled: currentPage == 0}">                                     <a href ng-click="prevPage()">« Prev</a>                                 </li>                                 <li ng-repeat="n in range(pagedItems.length)"                                     ng-class="{active: n == currentPage}"                                 ng-click="setPage()">                                     <a href ng-bind="n + 1">1</a>                                 </li>                                 <li ng-class="{disabled: currentPage == pagedItems.length - 1}">                                     <a href ng-click="nextPage()">Next »</a>                                 </li>                             </ul>                         </div>                     </td>                 </tfoot>                 <tbody>                     <tr ng-repeat="item in pagedItems[currentPage] | orderBy:sortingOrder:reverse">                         <td>{{item.id}}</td>                         <td>{{item.name}}</td>                         <td>{{item.description}}</td>                         <td>{{item.field3}}</td>                         <td>{{item.field4}}</td>                         <td>{{item.field5}}</td>                     </tr>                 </tbody>             </table>  

the $scope.range in the fiddle example should be:

$scope.range = function (size,start, end) {     var ret = [];             console.log(size,start, end);         if (size < end) {         end = size;         if(size<$scope.gap){              start = 0;         }else{              start = size-$scope.gap;         }      }     for (var i = start; i < end; i++) {         ret.push(i);     }              console.log(ret);             return ret; };