web-dev-qa-db-ja.com

列数が不明なAngularJS動的テーブル

Angularを初めて使用します。プロジェクトの開始点が必要です。背景でマウスをクリックして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 |
angularjsdynamictabular
13
Max Tkachenko

基本的に、次の方法で2つのネストされたng-repeatを使用できます。

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

33
David Frank

バックグラウンド要素に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
        });
    });

};
2
benri

Columnsという名前の列名の配列と、rowsと呼ばれる行の2D配列があります。このソリューションは、任意の数の行と列で機能します。私の例では、各行にはデータを含む「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>

お役に立てれば

1
phix