在角材料中具有相同内容的选项卡

Question

使用带有angularjs的材质时，我有两个md选项卡。这两个选项卡都包含大部分相同的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

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

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

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