角度のある素材で同じ内容のタブ

Question

角度のある素材を使用しているときに2つのmdタブがあります。両方のタブには、同じDOMツリー構造のほとんどが含まれていて、お互いに固有のコンテンツがいくつかあります。私は同じ共通のDOMを2回作成する必要がない代替案を探しています。一度書き込んで両方のタブで使う方法はありますか？続き はHTMLコードです：

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

何このソリューションについて：

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

後の角度のコードですか？ 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'