我有一个从 JSON 创建一个表的小任务，我使用 AngularJS 从 Web 服务获取它
创建一个普通表对我来说工作正常，但根据类型，我必须做一个 col span . 例如
如果类型为制造，则没有列跨度
如果类型是产品，那么我必须合并所有 3 列
如果类型是摘要，那么我必须合并前 2 列
请注意，此代码不起作用，因为我必须删除类型产品和制造商。
请帮助我格式化输出，如下所示
*-------------------------------*
| Manufacturer | Rate | Disc% |
+--------------|-------|--------+
| Product A |
|--------------+-------+--------|
| Manuf.A | 500 | 2 |
|--------------+-------+--------|
| Manuf.b | 450 | 0 |
|--------------+-------+--------|
| Manuf.c | 400 | 1 |
|--------------+-------+--------|
| No of Suppliers | 3 |
+-------------------------------+
.js
var app = angular.module('Products', []);
app.controller('MainCtrl', function($scope) {
$scope.array = [
{"Name":"Product A","Type":"Product"},
{"Name":"Manufacturer A","Rate":"100","discount":"2%","Type":"Manufacturer"},
{"Name":"Manufacturer B","Rate":"90","discount":"1%","Type":"Manufacturer"},
{"Name":"Manufacturer C","Rate":"95","discount":"XXXXXX","Type":"2%"},
{"Name":"No Of Suppliers","total":"3","Type":"Summary"}];
});
网页文件
<!DOCTYPE html>
<html ng-app="Products">
<head>
<script data-require="angular.js@*" data-semver="1.3.6" src="https://code.angularjs.org/1.3.6/angular.js"></script>
<script src="app1.js"></script>
<style>
td
{
vertical-align: middle;
}
</style>
</head>
<body ng-Controller="MainCtrl">
<table border="1">
<thead>
<tr>
<th>Manufacturer</th>
<th>Rate</th>
<th>Disc%</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in array track by $index">
<td>{{item.Name}}</td>
<td >{{item.Rate}}</td>
<td >{{item.discount}}</td>
</tr>
</tbody>
</table>
</body>
</html>
您可以使用
ng-repeat-start和ng-repeat-end指令：
<tbody>
<tr ng-repeat-start="item in array track by $index" ng-if="item.Type == 'Manufacturer'">
<td>{{item.Name}} {{item.Type}}</td>
<td>{{item.Rate}}</td>
<td>{{item.discount}}</td>
</tr>
<tr ng-if="item.Type == 'Product'">
<td colspan="3">
{{item.Name}}
</td>
</tr>
<tr ng-repeat-end ng-if="item.Type == 'Summary' ">
<td colspan="2">{{item.Name}}</td>
<td>{{item.total}}</td>
</tr>
</tbody>
演示：http://plnkr.co/edit/3MPj3okUsi3swJvSfdAr?p=preview
您可以使用
ng-show来实现此目的：
<tr ng-repeat="item in array track by $index">
<td colspan="3" ng-show="item.Type == 'Product'">{{item.Name}}</td>
<td colspan="2" ng-show="item.Type == 'Summary'">{{item.Name}}</td>
<td ng-show="item.Type != 'Product' && item.Type != 'Summary'">{{item.Name}}</td>
<td ng-show="item.Type != 'Product' && item.Type != 'Summary'">{{item.Rate}}</td>
<td ng-show="item.Type != 'Product' && item.Type != 'Summary'">{{item.discount}}</td>
<td ng-show="item.Type == 'Summary'">{{item.total}}</td>
</tr>