Question

我有一个静态的HTML表格，我想让它变得动态。是否重复使用正确的指令？我是棱角分明的，所以我不确定我会怎么做。我是否会创建一个控制器并将该表的HTML模板放在控制器中，或者我会做一些像“Track Name”这样的名称/值对并将其设置为“Track 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。＆lt; table class =＆＃34; table＆＃34; NG-控制器=＆＃34; AlbumController＆＃34;＆GT; ＆LT; THEAD＆GT; ＆LT; TR＆GT; ＆LT的第i;＃＆LT; /第＆GT; ＆lt; th＆gt;曲目名称＆lt; / th＆gt; ＆lt; th＆gt;跟踪持续时间＆lt; / th＆gt; ＆LT;第＆gt;选项＆LT; /第＆GT; ＆LT; / TR＆GT; ＆LT; / THEAD＆GT; ＆LT; TBODY＆GT; ＆lt; tr ng-repeat =＆＃34;跟踪专辑＆＃34;＆gt; ＆LT; TD＆GT; {{track.no}}＆LT; / TD＆GT; ＆LT; TD＆GT; {{track.name}}＆LT; / TD＆GT; ＆LT; TD＆GT; {{track.dur}}＆LT; / TD＆GT; ＆lt; td＆gt;＆lt; button class =＆＃34; btn btn-danger＆＃34;纳克单击=＆＃34;删除＆＃34;＆GT;删除＆LT; /按钮＆GT;＆LT; / TD＆GT; ＆LT; / TR＆GT; ＆LT; / tbody的＆GT; ＆LT; /表＆gt; myApp.controller（＆＃39; AlbumController＆＃39;，[＆＃39; $ scope＆＃39;，function（$ scope）{ $ scope.album = [ {no：1，姓名：＆＃34; Track 1＆＃34;，dur：＆＃34; 1：00＆＃34; }， {no：2，姓名：＆＃34; Track 2＆＃34;，dur：＆＃34; 3：00＆＃34; }， ]。 }]）; 编辑：错误已得到纠正。对于那个很抱歉。

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'
        }
      ];
    });

在表上使用ng-repeat指令

2 个答案: