javascript - Angular ng-repeat 重复 tr 与多个 td

Question

我正在开发我的电子商务应用程序，并尝试在我的应用程序中实现 Angular js。

我当前没 Angular html 代码就像 .每个 tr 有 4 个产品。

<table style="border-collapse:collapse;width: 769px">
<tbody>
<tr>
<td style="border:1px Dashed #bfbfbf;width: 192px;">/*Product Details goes here*/</td>
<td style="border:1px Dashed #bfbfbf;width: 192px;">/*Product Details goes here*/</td>
<td style="border:1px Dashed #bfbfbf;width: 192px;">/*Product Details goes here*/</td>
<td style="border:1px Dashed #bfbfbf;width: 192px;">/*Product Details goes here*/</td>
</tr>
<tr>
<td style="border:1px Dashed #bfbfbf;width: 192px;">/*Product Details goes here*/</td>
<td style="border:1px Dashed #bfbfbf;width: 192px;">/*Product Details goes here*/</td>
<td style="border:1px Dashed #bfbfbf;width: 192px;">/*Product Details goes here*/</td>
<td style="border:1px Dashed #bfbfbf;width: 192px;">/*Product Details goes here*/</td>
</tr>
...
...
...
</tbody>
</table>

现在，当我尝试实现 Angular js 并动态加载我的产品时，我必须编写以下代码

<table style="border-collapse:collapse;width: 769px">
<tr>
<td ng-repeat="product in products" style="border:1px Dashed #bfbfbf;width:192px;colspan="4"";>
<ng-include src="product.FullDescription"></ng-include>
</td>
</tr>
</table>

这当然会创建单行，所有产品都在单行中。任何人都想使用 ng-repeat 以便我可以拥有多个 tr，每个 tr 有 4 个 tds

更新

这是我的 Controller

angular.module('myApp', [])
.controller('NgProducts', function($scope) {
$scope.products=@Html.Raw(Json.Encode(Model.Products));//Model.products can contain any number of products. 


  // I want to load this every product in single td and also want to have mtliple tr with each tr having 4 tds

});

这个link解决了我的问题

Answer 1

在 tr 上使用 ng-repeat="product in products"

喜欢

<table style="border-collapse:collapse;width: 769px">
<tr ng-repeat="product in products">
<td  style="border:1px Dashed #bfbfbf;width:192px;colspan="4"";>
<ng-include src="product.FullDescription"></ng-include>
</td>
</tr>
</table>

这是我正在构建的应用程序的示例:

<tr ng-repeat="alldata in mydata.row | filter:search | orderBy:sortBy:reverse ">
                    <td><div>{{alldata.id | number}}</div></td>
                    <td>{{alldata.name | uppercase}}</td>
                    <td>{{alldata.numbers}}</td>
                        <td><a href="#/edit/{{alldata.id}}" class="btn btn-primary">Edit</a></td>

                </tr>

它看起来与您的应用程序类似。