AngularJS: таблица с ng-повтором в строке / столбце таблицы

Question

Мне нужно создать таблицу из массива объектов, но я не хочу жестко кодировать таблицу. Я не могу сделать это или это, например. Мне скорее нужны вложенные ng-повторы, как это. Но мой случай немного отличается, потому что у меня есть столбцы, которые содержат два значения в массиве. Данные выглядят так:

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

Я хочу значения (которые всегда являются строками) всех объектов (которые всегда имеют одинаковую структуру) из массива в строках таблицы, где каждый ключ должен быть именем столбца. Как это:

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) вернет true, если это значение является массивом, и false, если это не так. Это позволит иметь два 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://stackru.com/ (место, где люди публикуют вещи, которые еще не работают должным образом), вы, вероятно, можете догадаться, что мой текущий код работает не очень хорошо. Я также новичок в 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);
}

Здесь работает скрипка