在表上使用ng-repeat指令

Question

我有一個要動態化的靜態HTML表。 ng-repeat是要使用的正確指令嗎？ 我是新手，所以我不太確定該怎么做。 我將創建一個控制器並將該表的HTML模板放入控制器中，還是執行類似具有“跟蹤名稱”的名稱/值對並將其設置為“跟蹤1”等操作？ 相當失落。 下表的HTML。 提前致謝。

<table class="table">
  <tr>
    <th>#</th>
    <th>Track Name</th>
    <th>Track Duration</th>
    <th>Options</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Track 1</td>
    <td>3:00</td>
    <td><button class="btn btn-danger">Delete</button></td>
  </tr>
  <tr>
    <td>2</td>
    <td>Track 2</td>
    <td>3:20</td>
    <td><button class="btn btn-danger">Delete</button></td>
  </tr>
</table>

Answer 1

您走在正確的軌道上。 您當然可以使用ng-repeat 。

<table class="table" ng-controller="AlbumController">
  <thead>
    <tr>
      <th>#</th>
      <th>Track Name</th>
      <th>Track Duration</th>
      <th>Options</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="track in album">
      <td>{{track.no}}</td>
      <td>{{track.name}}</td>
      <td>{{track.dur}}</td>
      <td><button class="btn btn-danger" ng-click="delete">Delete</button></td>
    </tr>
  </tbody>
</table>


myApp.controller('AlbumController', ['$scope', function($scope) {
  $scope.album = [
    { no: 1, name: "Track 1", dur: "1:00" },
    { no: 2, name: "Track 2", dur: "3:00" },
  ];
}]);

編輯：錯誤已得到糾正。 對於那個很抱歉。

Answer 2

這是一個示例，顯示了如何使用多個ng-repeat來使表更具動態性，以便隨着對象獲得更多屬性，表將進行相應更新。

的HTML

    <table class="table" ng-controller="TableCtrl">
        <thead>
        <tr>
            <th ng-repeat="(key, value) in tableThings[0]">{{key}}</th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="item in tableThings">
            <td ng-repeat="(key, value) in item">{{value}}</td>
            <td><button class="btn btn-danger">Delete</button></td>
        </tr>
        </tbody>
    </table>

JS

angular.module('angular-tests', [])
    .controller('TableCtrl', function ($scope) {
      $scope.tableThings = [
        {
          Number: 1,
          'Track Name': 'Track 1',
          'Track Duration': '3:00'
        },
        {
          Number: 2,
          'Track Name': 'Track 2',
          'Track Duration': '3:20'
        }
      ];
    });