AngularJS 动态 table 列数未知

Question

我是 Angular 的新手，我的项目需要一些起点。如何通过在背景上单击鼠标从 ajax 数据创建新的 table？我知道 ajax 数据的列数未知，并且有时会有所不同。

例如：

the first click on background = table 1, ajax request to /api/table
| A | B | C |
| 1 | 2 | 3 |
| 5 | 7 | 9 |

the second click on background = table 2 and server returns new data from the same url /api/table
| X | Y |
| 5 | 3 |
| 8 | 9 |

Answer 1

您基本上可以通过以下方式使用两个嵌套的 ng-repeats：

<table border="1" ng-repeat="table in tables">
  <tr>
      <th ng-repeat="column in table.cols">{{column}}</th>
  </tr>
  <tr ng-repeat="row in table.rows">
    <td ng-repeat="column in table.cols">{{row[column]}}</td>
  </tr>
</table>

在控制器中：

function MyCtrl($scope, $http) {
    $scope.index = 0;
    $scope.tables = [];
    $scope.loadNew = function() {
        $http.get(/*url*/).success(function(result) {
            $scope.tables.push({rows: result, cols: Object.keys(result)});
        });
        $scope.index++;
    }
}

然后在某处调用 loadNew()，例如。 <div ng-click="loadNew()"></div>

示例： http://jsfiddle.net/v6ruo7mj/1/

Answer 2

在您的后台元素上注册 ng-click 指令以通过 ajax 加载数据，并使用ng-repeat显示不确定长度的数据

<div ng-click="loadData()">
    <table ng-repeat="t in tables">
        <tr ng-repeat="row in t.data.rows">
            <td ng-repeat="col in row.cols">
                {{col.data}}
            </td>
        </tr>
    </table>
</div>

在控制器中：

$scope.tables = [];

$scope.loadData = function() {
    // ajax call .... load into $scope.data

    $.ajax( url, {
        // settings..
    }).done(function(ajax_data){
        $scope.tables.push({
            data: ajax_data
        });
    });

};

Answer 3

我有一个名为 columns 的列名数组和一个名为 rows 的二维行数组。此解决方案适用于任意数量的行和列。在我的示例中，每一行都有一个名为 'item' 的元素，其中包含数据。需要注意的是，列数等于我们要显示的每行项目数。

<thead> 
    <tr>
        <th ng-repeat="column in columns">{{column}}</th>
    </tr>
</thead>
<tbody>
    <tr ng-repeat="row in rows">
        <td ng-repeat="column in columns track by $index"> {{row.item[$index]}} </td>
    </tr>
</tbody>

希望对您有所帮助

AngularJS 动态 table 列数未知

AngularJS dynamic table with unknown number of columns

dynamic

tabular

angularjs