[英]tabs with same content in angular material
I have two md-tabs while using material with angularjs. 我使用带有angularjs的材料时有两个md-tabs。 Both the tabs contain most of same DOM tree structure, and just some unique content than each other. 这两个选项卡都包含大多数相同的DOM树结构,并且只包含一些彼此独特的内容。 I am looking for an alternative in which I don't need to create same common DOM twice. 我正在寻找一种替代方案,我不需要两次创建相同的常见DOM。 Is there a way I can write it once, and use it in both the tabs. 有没有办法我可以写一次,并在两个选项卡中使用它。 Following is HTML Code : 以下是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>
Following is angular code : 以下是角度代码:
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++;
};
});
What about this solution? 这个解决方案怎么样? http://jsfiddle.net/8u8wxhjz/17/ 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 the tabs with ng-repeat="n in [1,2] track by $index"
and then we will use $index to retrieve the correct data from our $scope
, for example: 使用ng-repeat="n in [1,2] track by $index"
重新选择标签,然后我们将使用$ index从$scope
检索正确的数据,例如:
$scope.labels = ['FIRST', 'SECOND']; // $index = 0, so it will take 'FIRST'
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.