Tabella dinamica AngularJS con numero sconosciuto di colonne

Question

Sono nuovo di Angular e ho bisogno di un punto di partenza per il mio progetto. Come posso creare una nuova tabella da dati Ajax facendo clic con il mouse sullo sfondo? So che i dati Ajax hanno un numero sconosciuto di colonne e possono essere diversi di volta in volta.

Ad esempio:

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

Si potrebbe fondamentalmente utilizzare due annidati NG-ripete nel modo seguente:

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

Nel controllore:

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

Quindi chiamare loadNew() da qualche parte, ad es. <div ng-click="loadNew()"></div>

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

Answer 2

registro della direttiva ng-click sul vostro elemento di sfondo per caricare i dati tramite la tecnologia AJAX, e l'uso ng-repeat per visualizzare i dati di lunghezza incerta

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

nel 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 
     }); 
    }); 

}; 

Answer 3

Ho un array di nomi di colonne na med colonne e una matrice 2D di righe chiamate righe. Questa soluzione funziona con un numero arbitrario di righe e colonne. Nel mio esempio ogni riga ha un elemento chiamato 'elemento' che contiene i dati. È importante notare che il numero di colonne è uguale al numero di articoli per riga che vogliamo visualizzare.

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

Spero che questo aiuti