Построить таблицу динамически, используя модель в angularjs

Question

Привет всем, у меня есть эта разметка:

 table: {           
     columns: [
          {
             header: "Col 1",
             rows: [
                     1,2
                   ]
          },
          {
             header: "Col 2",
               rows: [
                        5,6
                     ]
           },
           {
             header: "Col 3",
               rows: [
                      3,4
                     ]
           }
       ]
   }

Я хотел бы использовать angularjs для создания таблицы, подобной этой:

<table class="table table-condensed table-bordered">
  <thead>
    <tr>
      <th data-ng-repeat="col in table.columns">{{col.header}}</th>
    </tr>
  </thead>
  <tbody>
    <tr data-ng-repeat="col in table.columns">
      <td data-ng-repeat="row in col.rows">{{row}}</td>
    </tr>
  </tbody>
</table>

Я хотел бы получить такой результат:

Кол 1 Кол 2 Кол 3

1 5 3

2 6 4

Однако приведенный выше код не дает такого результата.Я не против изменить структуру данных, если есть лучший способ сделать это.Единственное требование состоит в том, что, если я удаляю один столбец, все строки, принадлежащие этому столбцу, также должны пройти.Спасибо

Answer 1

Сохраняйте данные в том виде, в каком они у вас есть, и используйте две нижеприведенные функции для получения строк и изменения шаблона для использования функции getRows (). Обратите внимание, что в коде учитывается, что у вас всегда есть хотя бы один столбец:

function getRows(){
    let rows = new Array<Array<number>>();
    for (let i = 0; i<this.table.columns[0].rows.length; i++) {
        rows.push(getRow(i));
    }
    return row;
}

function getRow(index){
    let row = new Array<number>();
    for (let column of this.table.columns) {
        row.push(column.rows[index];
    }
    return row;
}

<table class="table table-condensed table-bordered">
    <thead>
        <tr>
            <th data-ng-repeat="col in table.columns">{{col.header}}</th>
        </tr>
    </thead>
    <tbody>
      <tr data-ng-repeat="row in getRows()">
          <td data-ng-repeat="value in row">{{row}}</td>
      </tr>
    </tbody>
</table>

Надеюсь, это поможет