AngularJS Таблица из массива

Question

Я разрабатываю проект в AngularJS, и мне нужна помощь. У меня есть таблица в моем индексе, которая получает данные из массива, который содержит чтение файла CSV. Первый пример работает, но я хотел бы иметь структуру таблицы, как показано во втором примере. Может кто-нибудь помочь мне адаптировать это для второго примера? спасибо (я пробовал так много раз, но безуспешно)

Первый пример (это работает):

<table class="table table-sm table-dark table-bordered" id="myTable">
    <tr  ng-repeat="x in data track by $index">
      <td id="barraca" ng-repeat="y in x track by $index">{{ y }}</td>
    </tr>
</table>

Второй пример (что я хочу):

<table id="table_id">
    <thead>
        <tr>
            <th>Column 1</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1 Data 1</td>
        </tr>
    </tbody>
</table>

Answer 1

Вы можете извлечь первую строку из входных данных для использования в качестве заголовков, а остальные строки должны выглядеть примерно так же, как в первом примере.

angular.module('application', [])
  .controller('AppCtrl', function($scope) {
    const csvData = [
      ["Notas", "NAlunos"],
      ["5", "2"],
      ["10", "7"],
      ["15", "8"],
      ["20", "1"]
    ];
    $scope.headers = csvData[0]; // just first row
    $scope.rows = csvData.splice(1); // all rows except first
  })

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

<div ng-app="application" ng-controller="AppCtrl">
  <table id="table_id">
    <thead>
      <tr>
        <th ng-repeat="header in headers">{{header}}</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="row in rows">
        <td ng-repeat="data in row">{{data}}</td>
      </tr>
    </tbody>
  </table>
</div>