Javascript AngularJS ng repeat start ng repeat end with table和rowspan

我在用动态行跨度创建动态表时遇到了这个问题。我的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
---------------------------------------------------------------------------

---

我正在努力获得动态划船跨度。请检查是否有人能提供帮助。

您可以通过让

ng repeat

over

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>

{{role.roleType.name}
{{rate.rateType.name}
{{rate.hourlyRate.value}
{{rate.internalRate.value}

---

Pankaj提到的是正确的，但我认为您需要在

行span

上有一个更动态的表。您可以按照以下示例执行以下操作：

var-app=angular.module（“sa”，[]）；
应用控制器（“FooController”，功能（$scope）{
$scope.data={
“roleTypes”：[{
“角色类型”：{
“名称”：“SOA角色”
},
“费率”：[{
“费率类型”：{
“名称”：“新费率”
},
“hourlyRate”：{
“价值”：1222
},
“内部化率”：{
“价值”：433
}
}, {
“费率类型”：{
“名称”：“myRate”
},
“hourlyRate”：{
“价值”：1350
},
“内部化率”：{
“价值”：1650
}
}]
}, {
“角色类型”：{
“名称”：“AngularJs开发者”
},
“费率”：[{
“费率类型”：{
“名称”：“新费率”
},
“hourlyRate”：{
“价值”：123
},
“内部化率”：{
“价值”：1431
}
}, {
“费率类型”：{
“名称”：“myRate”
},
“hourlyRate”：{
“价值”：443
},
“内部化率”：{
“价值”：1930年
}
}, {
“费率类型”：{
“名称”：“其他费率”
},
“hourlyRate”：{
“价值”：343
},
“内部化率”：{
“价值”：2000年
}
}]
}]
};
});
td[rowspan]{
垂直对齐：中间！重要；
}

角色类型
速率类型
钟楼
内在化
{{role.roleType.name}
{{role.rates[0].rateType.name}
{{role.rates[0].hourlyRate.value}
{{role.rates[0].internalRate.value}
{{rate.rateType.name}
{{rate.hourlyRate.value}
{{rate.internalRate.value}
这是无效的json。你能贴一张正确的吗？