角度材料中具有相同内容的选项卡答案

【问题标题】：tabs with same content in angular material角度材料中具有相同内容的选项卡
【发布时间】：2017-04-19 12:22:20
【问题描述】：

在使用带有 angularjs 的材料时，我有两个 md-tabs。两个选项卡都包含大部分相同的 DOM 树结构，并且只有一些彼此不同的内容。我正在寻找一种替代方案，我不需要两次创建相同的公共 DOM。有没有办法我可以写一次，并在两个选项卡中使用它。以下是 HTML 代码：

<div ng-app="test" ng-controller="TestController">
  <md-content>
    <md-tabs md-dynamic-height md-border-bottom>
      <md-tab label="FIRST" md-on-select="func1()">
        <md-content class="md-padding">
          <div>
            This is a very long DOM that is same in every tab :{{counter}}
          </div>
          <br>
          <div>
            This is dynamic
            <ul>
              <li ng-repeat="elem in arr1">{{elem}}</li>
            </ul>
          </div>
        </md-content>
      </md-tab>
      <md-tab label="SECOND" md-on-select="func1()">
        <md-content class="md-padding">
          <div>
            This is a very long DOM that is same in every tab : {{counter}}
          </div>
          <br>
          <div>
            This is dynamic
            <ul>
              <li ng-repeat="elem in arr2">{{elem}}</li>
            </ul>
          </div>
        </md-content>
      </md-tab>
    </md-tabs>
  </md-content>
</div>

以下是角码：

angular.module('test', ['ngMaterial'])
  .controller('TestController', function($scope) {
    $scope.counter = 0;
    $scope.arr1 = [1, 2, 3, 4, 5];
    $scope.arr2 = [5, 6, 7, 8, 9, 10];
    $scope.func1 = function() {
      $scope.counter++;
    };
  });

JS Fiddle

【问题讨论】：

是的。我们称之为组件！

标签： javascript angularjs angular-material

【解决方案1】：

这个解决方案怎么样？ http://jsfiddle.net/8u8wxhjz/17/

<md-tab ng-repeat="n in [1,2] track by $index" label="{{ labels[$index] }}" md-on-select="func1()">
  <md-content class="md-padding">
    <div>
      This is a very long DOM that is same in every tab : {{counter}}
    </div>
    <br>
    <div>
      This is dynamic
      <ul>
        <li ng-repeat="elem in arrs[$index]">{{elem}}</li>
      </ul>
    </div>
  </md-content>
</md-tab>

使用ng-repeat="n in [1,2] track by $index" 重复选项卡，然后我们将使用 $index 从我们的$scope 检索正确的数据，例如：

$scope.labels = ['FIRST', 'SECOND']; // $index = 0, so it will take 'FIRST'

【讨论】：