在表上使用 ng-repeat 指令

Using the ng-repeat directive on a table

本文关键字：ng-repeat 指令      更新时间：2023-09-26

我有一个静态的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>

下面的示例演示如何使用多个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.

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

编辑：错误已得到纠正。对此感到抱歉。

相关文章：