保存表格格式以在 AngularJS 中填充不同的值答案

【问题标题】：Saving a table format to fill in with different values in AngularJS保存表格格式以在 AngularJS 中填充不同的值
【发布时间】：2019-01-30 01:34:06
【问题描述】：

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

这是我的代码：

<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>

【问题讨论】：

将表格设为组件，然后将项目集合作为参数传递。
关于如何在控制器和 html 中组织它的任何代码片段

标签： angularjs html angularjs-material

【解决方案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>

【讨论】：