AngularJS：Table 在 table 行/列上使用 ng-repeat

Question

我需要从对象数组创建 table，但我不想对 table 进行硬编码。我做不到 this or this for example. I rather need nested ng-repeats like 。但我的情况有点不同，因为我的列在数组中包含两个值。数据如下所示：

[
   {
      "foo":"bar",...,
      "key1":[
         "value1",
         "value2"
      ],
      "key2":[
         "value1",
         "value2"
      ],...,
      "more_foo":"more_bar"
   },...
]

我想要 table 行中数组中所有对象（始终具有相同结构）的值（始终是字符串），其中每个键都应是列名。像这样：

table,
th,
td {
  border: 1px solid black;
  text-align: center;
  border-spacing: 0;
}

td,
th {
  padding: 0.5em;
}

<table>
  <thead>
    <tr>
      <th>foo</th>
      <th colspan="2">key1</th>
      <th colspan="2">key2</th>
      <th>more_foo</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>bar</td>
      <td>value1</td>
      <td>value2</td>
      <td>value1</td>
      <td>value2</td>
      <td>more_bar</td>
    </tr>
  </tbody>
</table>

这是我想出的：

<table>
    <thead>
    <tr>
        <th ng-repeat="(propName, prop) in myArray[0]"
            colspan="{{isUpdateable(propName) ? 2 : undefined}}"> {{propName}}
        </th>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="object in myArray | filter: searchFilter">
        <td ng-repeat="(propName, prop) in object" double-col>{{prop}}</td>
    </tr>
    </tbody>
</table>

如果此值是数组，

isUpdatable(propName) 将 return 为真，否则为假。这将使该列中有两个 td 成为可能。

双列指令：

app.directive('double-col', function () {
    return {
        transclude: true,
        template: "<td>{{prop[0]}}</td><td class=\"changedProp\">{{prop[1]}}</td>"
    };
});

我希望此指令用两个 td 替换现有的 td 当且仅当 prop 是一个数组，否则不显示 prop（参见上文 td）。

因为你在 https://whosebug.com（人们 post 事情还不能很好地工作的地方），你可能会猜到我当前的代码不能很好地工作。我也是 angularJS 的新手，基本上不了解自定义指令（可能还有大多数其他内容），所以如果有人能帮助我解决这个问题并提供解释，那就太好了。

Answer 1

怎么样

<tr ng-repeat="object in myArray | filter: searchFilter">
        <td ng-repeat="(propName, prop) in object" colspan="{{isArray(prop) ? prop.length : 1}}">
       <span ng-if="!isArray(prop)"> {{prop}}</span>
        <table ng-if="isArray(prop)"><tr>
    <td ng-repeat="prop1 in prop">
        {{prop1}}
    </td>
   </tr></table>
        </td>

    </tr>

$scope.isArray=function(prop){
return Array.isArray(prop);
}

Here is working fiddle

AngularJS：Table 在 table 行/列上使用 ng-repeat

AngularJS: Table with ng-repeat on table row / column

html-table

angularjs

angularjs-directive

angularjs-ng-repeat

custom-directive