Javascript 用AngularJS呈现HTML表

我需要在我的AngularJS应用程序中显示一个包含一些产品基本信息的表格，如下所示：

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

产品1
产品2
产品3
产品4

这些产品位于我的控制器中的一个范围变量中，为了生成表代码，我使用了以下逻辑：

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

{{product.name}

但我发现这非常低效，因为我必须显示多行，而且产品列表可能会经常更改

---

是否有更好的实现来实现所需的结果？

如果您使用divs，它的响应性会更好（它可以在许多屏幕大小上工作）：查看此线程如果您要显示大量产品（因此，大量图像）以及与这些产品中的每一个相关的其他信息，您最好考虑使用延迟加载插件，以防超出Angular的世界或使用Angular的惰性加载可能适合您的options@fillippo，您可以在ng repeat中使用

track by$index

，这对于动态数据更改更快，因为DOM不是每次都重建。或者试试——