在角材料中具有相同内容的选项卡
问题描述:
使用带有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++;
};
});
答
这个怎么样的解决方案? 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'
是。我们称之为组件! – hurricane