angular-js present an array as 2d table

Question

I have an array of books in my model :

(function() {
  var app = angular.module("googleBooksViewer", []);
  var mainController = function($scope, $http) {
    $scope.search = function(bookname) {
      $http.get("https://www.googleapis.com/books/v1/volumes?q=" + bookname)
        .then(function(response) {
          $scope.books = response.data;
        });
    };
  };
  app.controller("mainController", mainController);
})();

I know i can use ng-repeat to present book thumbnails as a list but i want it to fill the screen with a table of 8 thumbnails per row. Is there a way to do that in my view html, Or do i must create the 2d array in my model ?

Can you please post example json in your question that is returned from the api. — Wayne Ellery
– Wayne Ellery, Commented Jan 10, 2015 at 7:27
The returned json is pretty large but in essence it is an array of items which have a thumbnail property — MichaelB
– MichaelB, Commented Jan 10, 2015 at 7:51

dfsq · Accepted Answer · 2015-01-10 07:28:18Z

I would say this is more of CSS problem. You can use % width for book blocks to make them occupy 8 blocks per row (12.5% width). Then HTML with ngRepeat will be pretty simple:

<div class="container">
    <div class="book" ng-repeat="book in books">
        {{book.title}} ...
    </div>
</div>

The main job is done by CSS:

.container .book {
    width: 12.5%;
    float: left;
    /* ... */
}

Check the demo below.

.container {
    overflow: hidden;
    border: 1px #DDD solid;
}
.container .book {
    width: 12.5%;
    float: left;
    padding: 5px;
    background: #EEE;
    box-sizing: border-box;
    border: 1px #AAA solid;
}

<div class="container">
    <div class="book">Book title 1</div>
    <div class="book">Book title 2</div>
    <div class="book">Book title 3</div>
    <div class="book">Book title 4</div>
    <div class="book">Book title 5</div>
    <div class="book">Book title 6</div>
    <div class="book">Book title 7</div>
    <div class="book">Book title 8</div>
    <div class="book">Book title 9</div>
    <div class="book">Book title 10</div>
    <div class="book">Book title 11</div>
    <div class="book">Book title 12</div>
    <div class="book">Book title 13</div>
    <div class="book">Book title 14</div>
    <div class="book">Book title 15</div>
    <div class="book">Book title 16</div>
    <div class="book">Book title 17</div>
    <div class="book">Book title 18</div>
    <div class="book">Book title 19</div>
    <div class="book">Book title 20</div>
    <div class="book">Book title 21</div>
    <div class="book">Book title 22</div>
    <div class="book">Book title 23</div>
    <div class="book">Book title 24</div>
</div>

Collectives™ on Stack Overflow

angular-js present an array as 2d table

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related