13

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.

For example: 

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 |
Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Max Tkachenko
  • 792
  • 1
  • 12
  • 30

3 Answers3

34

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>

In the controller:

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++;
    }
}

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

Example: http://jsfiddle.net/v6ruo7mj/1/

David Frank
  • 5,918
  • 8
  • 28
  • 43
  • thanks a lot! But how can I create a table by mouse click dynamically? I need multiple tables (one per each click)... – Max Tkachenko Jan 08 '15 at 23:47
  • Hi. Thanks for this. But What if I have to format data of a particular column like date fields. How hat can be done? – Nikhil Mahajan Feb 03 '16 at 07:19
  • @NikhilMahajan You either retrieve the data already formatted, or format it in the loadNew() function, or rewrite ng-repeat="column.." manually, rendering each column as you wish. – David Frank Feb 03 '16 at 08:44
2

register the ng-click directive on your background element to load data via ajax, and use ng-repeat to display data of uncertain length

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

in the controller:

$scope.tables = [];

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

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

};
benri
  • 161
  • 6
  • thanx! and what if I need multiple tables: one new per each click? – Max Tkachenko Jan 08 '15 at 23:52
  • add ng-repeat to table: `
    `, change the loadData to append to tables array, and each table is an object containing the tables data. (edited answer)     – benri Jan 08 '15 at 23:58
1

I have an array of column names named columns and a 2D array of rows called rows. This solution works with an arbitrary number of rows and columns. In my example each row has an element called 'item' which contains the data. It is important to note that the number of columns is equal to the number of items per row we want to display.

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

Hope this helps

phix
  • 135
  • 1
  • 8