web-dev-qa-db-fra.com

Tableau dynamique AngularJS avec un nombre inconnu de colonnes

Je suis nouveau dans Angular et j’ai besoin d’un point de départ pour mon projet ..__ Comment puis-je créer une nouvelle table à partir de données ajax par un clic de souris sur l’arrière-plan? Je sais que les données ajax ont un nombre inconnu de colonnes et peuvent être différentes de temps en temps.

Par exemple:  

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

enregistre la directive ng-click sur votre élément d'arrière-plan pour charger des données via ajax, et utilisez ng-repeat pour afficher des données de longueur incertaine

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

dans le contrôleur:

$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

J'ai un tableau de noms de colonnes nommés colonnes et un tableau 2D de lignes appelées lignes. Cette solution fonctionne avec un nombre arbitraire de lignes et de colonnes. Dans mon exemple, chaque ligne a un élément appelé 'item' qui contient les données. Il est important de noter que le nombre de colonnes est égal au nombre d'éléments par ligne que nous voulons afficher.

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

J'espère que cela t'aides

1
phix