Question

我正在创建一个角度应用来显示来自各种数据源的数据。我在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" }
    });

事实证明，只有在我使用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

Angular中的表使用动态表头

1 个答案: