AngularJS ng-repeat-start ng-repeat-end 带有表和行跨度答案

【问题标题】：AngularJS ng-repeat-start ng-repeat-end with table and rowspanAngularJS ng-repeat-start ng-repeat-end 带有表和行跨度
【发布时间】：2016-12-26 13:49:06
【问题描述】：

我在制作具有动态行跨度的动态表时遇到问题。我的 json 是一个对象数组。元素对象也是数组。元素数组应该作为动态行跨度的编号。我有一个像这样的 json：

{
  "roleTypes": [
    {
      "roleType": {
        "name": "SOA Role"
      },
      "rates": [
        {
          "rateType": {
            "name": "new Rate"
          },
          "hourlyRate": {
            "value": 1222
          },
          "internalRate": {
            "value": 433
          }
        },
        {
          "rateType": {
            "name": "myRate"
          },
          "hourlyRate": {
            "value": 1350
          },
          "internalRate": {
            "value": 1650
          }
        }
      ]
    },
    {
      "roleType": {
        "name": "SOA Role"
      },
      "rates": [
        {
          "rateType": {
            "name": "new Rate"
          },
          "hourlyRate": {
            "value": 1222
          },
          "internalRate": {
            "value": 433
          }
        },
        {
          "rateType": {
            "name": "myRate"
          },
          "hourlyRate": {
            "value": 1350
          },
          "internalRate": {
            "value": 1650
          }
        }
      ]
    },
    {
      "roleType": {
        "name": "AngularJs Developer"
      }
    }
  ]
}

如果我想使用 ng-repeat-start 和 ng-repeat-end 并制作如下表结构：

roleType------      | rateType-----hourlyRate--------internalRate
---------------------------------------------------------------------------
                    | new Rate      1222                433
                    ---------------------------------------------------
SOA Role            | myRate        1350                1650
---------------------------------------------------------------------------
                    | new Rate      1222                 433
                    ---------------------------------------------------
AngularJs Developer |myRate         1350                 1650
---------------------------------------------------------------------------

我正在努力获得动态行跨度。请检查是否有人可以提供帮助。

【问题讨论】：

这是无效的 json。能发一个正确的吗？

标签： javascript html angularjs angularjs-ng-repeat ng-repeat

【解决方案1】：

Pankaj 提到的内容是正确的，但我认为您需要在 rowspan 上创建一个更加动态的表格。你可以像下面的例子那样做：

var app = angular.module("sa", []);

app.controller("FooController", function($scope) {

  $scope.data = {
    "roleTypes": [{
      "roleType": {
        "name": "SOA Role"
      },
      "rates": [{
        "rateType": {
          "name": "new Rate"
        },
        "hourlyRate": {
          "value": 1222
        },
        "internalRate": {
          "value": 433
        }
      }, {
        "rateType": {
          "name": "myRate"
        },
        "hourlyRate": {
          "value": 1350
        },
        "internalRate": {
          "value": 1650
        }
      }]
    }, {
      "roleType": {
        "name": "AngularJs Developer"
      },
      "rates": [{
        "rateType": {
          "name": "new Rate"
        },
        "hourlyRate": {
          "value": 123
        },
        "internalRate": {
          "value": 1431
        }
      }, {
        "rateType": {
          "name": "myRate"
        },
        "hourlyRate": {
          "value": 443
        },
        "internalRate": {
          "value": 1930
        }
      }, {
        "rateType": {
          "name": "otherRate"
        },
        "hourlyRate": {
          "value": 343
        },
        "internalRate": {
          "value": 2000
        }
      }]
    }]
  };
});

td[rowspan] {
  vertical-align: middle !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">


<div ng-app="sa" ng-controller="FooController">
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>roleType</th>
        <th>rateType</th>
        <th>hourlyRate</th>
        <th>internalRate</th>
      </tr>
    </thead>

    <tbody>
      <tr ng-repeat-start="role in data.roleTypes">
        <td rowspan="{{role.rates.length}}">{{role.roleType.name}}</td>
        <!-- Display the first rate in the same "tr" -->
        <td>{{role.rates[0].rateType.name}}</td>
        <td>{{role.rates[0].hourlyRate.value}}</td>
        <td>{{role.rates[0].internalRate.value}}</td>
      </tr>
      
      <!-- Now display the other rates in different "tr" excluding first -->
      <!-- You can also make a subarray from here excluding the 1st rate -->
      <tr ng-repeat="rate in role.rates" ng-if="!$first" ng-repeat-end>
        <td>
          {{rate.rateType.name}}
        </td>
        <td>
          {{rate.hourlyRate.value}}
        </td>
        <td>
          {{rate.internalRate.value}}
        </td>
      </tr>
    </tbody>
  </table>
</div>

【讨论】：

【解决方案2】：

您可以通过将ng-repeat 置于tbody 之上来执行以下操作

<table>
  <tbody ng-repeat="role in roleTypes.roleTypes">
    <tr ng-repeat="rate in role.rates">
      <td ng-if="$first" rowspan="2">{{role.roleType.name}}</td>
      <td>{{rate.rateType.name}}</td>
      <td>{{rate.hourlyRate.value}}</td>
      <td>{{rate.internalRate.value}}</td>
      <tr>
  </tbody>
</table>

Plunkr

【讨论】：