在angularjs中使用model动态建表

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>

​

希望这能有所帮助