Question

我有一个小任务，即从json创建一个表，我使用angularjs从web服务获取它

创建一个普通的表对我来说很好，但根据类型，我必须做一个col span。例如

如果type是Manufacture，那么没有col span
如果type是Product，那么我必须合并所有3列
如果type是Summary，那么我必须合并前2列

请注意，此代码不起作用，因为我必须删除Type Product和Manufacturer。

请帮我格式化输出，如下所示

*-------------------------------*   
| 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"}];
 });

Html文件

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

Answer 1

您可以使用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

Answer 2

您可以使用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>

Angularjs json数据表根据条件重复

2 个答案:

演示：http://plnkr.co/edit/3MPj3okUsi3swJvSfdAr?p=preview