0

I need to display a table with some basic information about products in my AngularJS app, something like this:

<table>
    <tbody>
        <tr class="product-image">
            <td class="mar-b-0 pad-b-0">
                <img src="../image/product1.jpg" alt="product name" />
            </td>
            <td class="mar-b-0 pad-b-0">
                <img src="../image/product2.jpg" alt="product name" />
            </td>
            <td class="mar-b-0 pad-b-0">
                <img src="../image/product3.jpg" alt="product name" />
            </td>
            <td class="mar-b-0 pad-b-0">
                <img src="../image/product4.jpg" alt="product name" />
            </td>
        </tr>
        <tr class="prod-name">
            <td><a href="#">Product 1</td>
            <td><a href="#">Product 2</td>
            <td><a href="#">Product 3</td>
            <td><a href="#">Product 4</td>
        </tr>
    </tbody>
</table>

The products are in a scope variable in my controller and to generate the table code I used the following logic:

<table>
    <tbody>
        <tr class="product-image">
            <td ng-repeat="product in productsList" class="mar-b-0 pad-b-0">
                <img src="{{ product.image }}" alt="product name" />
            </td>
        </tr>
        <tr class="prod-name">
            <td ng-repeat="product in productsList"><a href="#">{{ product.name }}</td>
        </tr>
    </tbody>
</table>

But I find this highly inefficient because I'll have to display multiple rows and the list of the products can change quite often.

Is there a better implementation to achieve the required result?

filippo.derosa84
  • 126
  • 1
  • 2
  • 14
  • 1
    If you use divs, it will be more responsive (it will work on many screen sizes): http://programmers.stackexchange.com/questions/277778/why-are-people-making-tables-with-divs – Brent Washburne Jun 23 '15 at 21:36
  • Check out this thread http://stackoverflow.com/questions/21375073/best-way-to-represent-a-grid-or-table-in-angularjs-with-bootstrap-3 – Jack Shultz Jun 23 '15 at 21:43
  • If you are to show a lot of products (thus, a lot of images) and other info associated with each one of those products, you might as well think of using lazy loading plugins, in case going outside Angular world or using lazy loading with Angular could fit within your set of options – Sudhansu Choudhary Jun 23 '15 at 21:43
  • @fillippo, you can use `track by $index` in ng-repeat, which is faster with dynamic data change because DOM is not rebuilding everytime. or try [my custom render engine](https://github.com/S-YOU/doTA) - ``
     – YOU Jun 25 '15 at 04:55

0 Answers0