javascript - 您可以使用Angular.js填充表而无需对列名称进行硬编码吗？

我有一个简单的Angular.js应用程序，该应用程序从mysql数据库中获取表格数据，并将其显示在简单的引导表中。我在下面使用此代码显示表列名称，而无需单独对其进行硬编码…

HTML:
       <table class="table">
        <thead>
          <tr style="background:lightgrey">
             <th ng-repeat="column in columns"> {{ column }} </th>
          </tr>
        </thead>

然后在控制器中创建“ $ scope.columns”，如下所示：

    var columnNames = function(dat) {
        var columns = Object.keys(dat[0]).filter(function(key) {
          if (dat[0].hasOwnProperty(key) && typeof key == 'string') {
            return key;
          }
        });
        return columns;
    };

    DataFactory.getTables(function(data) {
        $scope.columns = columnNames(data);
        $scope.tables = data;
    });

而且这可以按预期工作，而且效果很好，但是其余的数据又如何呢。例如，表的主体当前看起来像这样……

HTML:
       <tbody>
          <tr ng-repeat="x in tables ">
            <td> {{ x.id}} </td>
            <td> {{ x.name }} </td>
            <td> {{ x.email }} </td>
            <td> {{ x.company }} </td>
        </tbody>

我试过使用两个这样的循环...

HTML:
        <tbody>
          <tr ng-repeat="x in tables">
            <td ng-repeat=“column in columns”> {{ x.column }} </td>
          </tr>
        </tbody>

但是此代码不起作用，因此可以用角度填充表而无需对HTML中的列名进行硬编码，如果这样，最有效的方法是什么？

最佳答案

您可能要尝试此https://jsfiddle.net/8w2sbs6L/。

<div data-ng-app="APP">
    <table ng-controller="myController" border=1>
    <thead>
        <tr>
          <td ng-repeat="column in columns">{{column}}</td>
        </tr>
    </thead>
        <tbody>
      <tr ng-repeat="x in tables">
        <td ng-repeat="column in columns">{{x[column]}}</td>
      </tr>
    </tbody>
    </table>
</div>


<script>

'use strict';

angular.module('APP', [])


.controller('myController', ['$scope', function($scope){
    $scope.tables = [
        {
            "column1":"row1-column1",
        "column2":"row1-column2",
            "column3":"row1-column3",
            "column4":"row1-column4"
        },
        {
            "column1":"row2-column1",
        "column2":"row2-column2",
            "column3":"row2-column3",
            "column4":"row2-column4"
        }
    ];

    $scope.columns = [
        "column1",
      "column2",
        "column3",
        "column4"
    ];
}]);

</script>