Tabs mit gleichem Inhalt in eckigem Material

Question

Ich habe zwei md-Tabs bei der Verwendung von Material mit angularjs. Beide Registerkarten enthalten fast die gleiche DOM-Baumstruktur und nur einen eindeutigen Inhalt. Ich suche nach einer Alternative, bei der ich nicht zweimal dasselbe gemeinsame DOM erstellen muss. Gibt es einen Weg, wie ich es einmal schreiben kann, und benutze es in beiden Tabs. Im Folgenden HTML-Code:

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

Es folgt Winkelcode:

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

an dieser Lösung? 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 die Laschen mit ng-repeat="n in [1,2] track by $index" und dann werden wir $ Index verwenden, um die richtigen Daten aus unserem $scope, zum Beispiel abzurufen:

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