在角材料中具有相同內容的選項卡

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'