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

Question

I am new with UI technologies. I am trying to create a HTML page with tabs, both the tabs will show different data in a table of same format. Is there a way where I can save the table format , fill it with different values and render them for each tab? Thanks in anticipation for any help or hint.

Here is my code:

<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

You could make it a component and then pass the collection of items as a parameter. Normally I wouldn't define the template inline like this (unless it's a very simple template) - rather I'd have it in its own HTML file. This may not be exactly what you need, but should give you an idea of how you might use a component. I've used one-way binding (<), but if you need to update the items in the collection you'd want to use two-way (=).

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>