Angular 中使用动态表头的表

Question

我正在创建一个 Angular 应用程序来显示来自各种数据源的数据。我在 JSON 文件中配置了各种数据源的列表，每个数据源都有一组附加值。 这是一个例子

var configurableConfigurations=[
   {
       name:"Locations",
       table:"location_set",
       columnList:[
          {
              name:"LOCATION_NAME",
              alias:"Location",
              primary:true
          },
          {
              name:"DESCRIPTION",
              alias:"Description",
              primary:false
          } 
       ]
   },
   {
       name:"System Parameters",
       table:"system_params",
       columnList:[
                  {
                      name:"param_Key",
                      alias:"Parameter",
                      primary:true
                  },
                  {
                      name:"param_Value",
                      alias:"Value",
                      primary:false
                  } 
       ]
   }
];

然后我创建了一个 HTML 页面来使用 angular 来显示它：该页面有 2 个部分 1. 显示各种参数的选择框，这是使用 ng-repeat 完成的 <select name="ConfigurationName" ng-model="selected" ng-options="eachConfiguration.name for eachConfiguration in configurableConfigurations" ng-change="fetchRequiredConfiguration()">

1. 我想使用所选参数的标题生成的表 这是我的代码

   <table id="configtable">
   <thead>
       <tr>                
           <th class="col-md-1" ng-repeat="column in selected.columnList" >{{column.alias}}</th>                   
       </tr>
   </thead>
   

这是第一次很好用。但是当使用选择框再次选择该选项时，不会显示表头。

表格数据被正确填充，只是表格标题被弄乱了。

谁能帮我解决这个问题。我是 angularjs 的新手。可能是我遗漏了一些重要的东西。

编辑 :: 我还应该提到我从 API 获取数据，然后使用数据表插件（https://www.datatables.net/download/）将其显示为数据

    $("#configtable").DataTable({
        "ajax": "../fetchvalue/config/"+this.selected.table,
        destroy: true,
        "columns":{ "data": "ColumnXXX"},
         {"data": "ColumnYYY" }
    });

事实证明，只有在使用 DataTable 时，我才会遇到标题消失的问题

Answer 1

我不知道表格数据是怎么存储的，但是这种方式很好：

$scope.configurableConfigurations = [{
    name: "Locations",
    table: "location_set",
    columnList: [{
      name: "LOCATION_NAME",
      alias: "Location",
      primary: true
    }, {
      name: "DESCRIPTION",
      alias: "Description",
      primary: false
    }],
    data:[[12,"home"],[43,"work"]]
  }, {
    name: "System Parameters",
    table: "system_params",
    columnList: [{
      name: "param_Key",
      alias: "Parameter",
      primary: true
    }, {
      name: "param_Value",
      alias: "Value",
      primary: false
    }],
    data:[["GOO",586],["FOO",123]]
  }];

然后你可以像这样打印表格：

<select name="ConfigurationName" ng-model="selected" ng-options="eachConfiguration as  eachConfiguration.name for eachConfiguration in configurableConfigurations" ng-change="fetchRequiredConfiguration()"></select>
    <table id="configtable">
      <thead>
        <tr>
          <th class="col-md-1" ng-repeat="column in selected.columnList">{{column.alias}}</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="row in selected.data" >
          <td class="col-md-1" ng-repeat="col in row">{{col}}</td>
        </tr>
      </tbody>
    </table>

例如here