保存 table 格式以在 AngularJS 中填充不同的值

Question

我是 UI 技术的新手。我正在尝试创建一个带有选项卡的 HTML 页面，这两个选项卡将以相同格式的 table 显示不同的数据。有没有一种方法可以保存 table 格式，用不同的值填充它并为每个选项卡呈现它们？感谢期待任何帮助或提示。

这是我的代码：

<div ng-cloak="" class="container" ng-app="MyApp" ng-controller="MyAppControler" ng-init="init()">
<h1></h1>
   <md-content>
        <md-tabs md-dynamic-height="" md-border-bottom="">
            <md-tab label="Teachers">
                <md-content class="md-padding">
                    <table class="table table-striped" >
                    <colgroup>
                        <col width="" />
                        <col width="" />
                    </colgroup>
                    <thead>
                        <tr>
                            <th width="100">Name</th>
                            <th width="260">Address</th>
                         </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="Name in teacherNameList">
                            <td>{{name}}</td>
                            <td>{{Address}}</td>
                        </tr>
                    </tbody>
                    </table>
                </md-content>
            </md-tab>
            <md-tab label="Students">
                <md-content class="md-padding">
                    <table class="table table-striped">
                        <colgroup>
                        <col width="" />
                        <col width="" />
                    </colgroup>
                    <thead>
                        <tr>
                            <th width="100">Name</th>
                            <th width="260">Address</th>
                         </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="Name in studentNameList">
                            <td>{{name}}</td>
                            <td>{{Address}}</td>
                        </tr>
                    </tbody>
                    </table>
                </md-content>
            </md-tab>
        </md-tabs>
    </md-content>

Answer 1

您可以将其作为一个组件，然后将项目集合作为参数传递。通常我不会像这样内联定义模板（除非它是一个非常简单的模板）——而是我会把它放在自己的 HTML 文件中。这可能不是您所需要的，但应该让您了解如何使用组件。我使用的是单向绑定 (<)，但如果您需要更新集合中的项目，您会希望使用双向绑定 (=)。

angular.module('app', [])
  .component('myCustomTable', {
    template: '<table class="table table-striped">' +
        '<colgroup>' +
          '<col width="" />' +
          '<col width="" />' +
        '</colgroup>' +
        '<thead>' +
          '<tr>' +
            '<th width="100">Name</th>' +
            '<th width="260">Address</th>' +
          '</tr>' +
        '<thead>' +
        '<tbody>' +
          '<tr ng-repeat="item in $ctrl.collection">' +
            '<td>{{ item.name }}</td>' +
            '<td>{{ item.address }}</td>' +
          '</tr>' +
        '</tbody>' +
      '</table>',
    controller: MyCustomTableController,
    bindings: {
      collection: '<'
    }
  })
  .controller('ctrl', ($scope) => {
    $scope.teachers = [{
      name: 'Mr. Smith',
      address: 'Room 101'
    }, {
      name: 'Ms. Smith',
      address: 'Room 201'
    }];
    $scope.students = [{
      name: 'Jane Doe',
      address: '123 Any Street'
    }, {
      name: 'John Doe',
      address: '123 Any Drive'
    }];
  });

function MyCustomTableController() {}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <div>
    <h3>Teachers</h3>
    <my-custom-table collection="teachers"></my-custom-table>
  </div>
  <div>
    <h3>Students</h3>
    <my-custom-table collection="students"></my-custom-table>
  </div>
</div>

保存 table 格式以在 AngularJS 中填充不同的值

Saving a table format to fill in with different values in AngularJS

html

angularjs

angularjs-material