javascript - 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()">

我想使用所选参数的标题生成的表格这是我的代码来做到这一点

<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" }
    });

事实证明，只有当我使用数据表时，我才会遇到标题消失的问题

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