有角度的ng用多个td重复tr

Angular ng-repeat repeat tr with multiple td

本文关键字：td 重复 tr ng      更新时间：2023-09-26

我正在开发我的电子商务应用程序，并试图在我的应用程序中实现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重复的人，这样我就可以有多个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
});

这个链接解决了我的问题

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

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

相关文章：