각도 재료의 내용이 동일한 탭

Question

angularj가있는 재료를 사용하는 동안 두 개의 md 탭이 있습니다. 두 탭은 대부분 동일한 DOM 트리 구조와 서로보다 고유 한 콘텐츠를 포함합니다. 동일한 공용 DOM을 두 번 만들 필요가없는 대안을 찾고 있습니다. 한 번 쓰고 두 탭에서 모두 사용할 수있는 방법이 있습니까? 어떤이 솔루션에 대한

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> 

다음은 각 코드 : 다음은 HTML 코드인가? 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'