Question

我有一个简单的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>

但是这段代码不起作用，那么是否可以使用angular填充表而不用HTML编写列名，如果是这样，最有效的方法是什么呢？

Answer 1

您可能想尝试此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>

你可以使用Angular.js填充表而无需硬编码列名吗？

1 个答案: