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>

希望这会有所帮助

使用angularjs中的模型动态构建表

1 个答案: