Question

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

使用ng-repeat="n in [1,2] track by $index"重新设置标签，然后我们将使用$ index从$scope中检索正确的数据，例如：

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

角材料中具有相同内容的标签

1 个答案: