Question

我正在研究我的电子商务应用程序并试图在我的应用程序中实现角度js。

我当前没有角度的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>

现在，当我尝试实现角度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

更新

这是我的控制器

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>

它看起来与你的应用程序相似。

具有多个td的角度ng-重复重复tr

1 个答案: