具有未知列数的AngularJS动态表

问题描述

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

I'm new to Angular and I need some start point for my project.How can I create new table from ajax data by mouse click on the background?I know that ajax data has unknown number of columns and can be different from time to time.

例如:

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 |

推荐答案

基本上可以通过以下方式使用两个嵌套的 ng-repeat:

You could basically use two nested ng-repeats in the following way:

<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>

Then call loadNew() somewhere, eg. <div ng-click="loadNew()"></div>

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

这篇关于具有未知列数的AngularJS动态表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！