我试图将面板的高度与各个angular-ui标签的不同高度相匹配。我试图单独使用ng-style但是没有在标签上触发"选择"。所以我认为我可以使用一个函数来更改每个选项卡面板主体上的ng样式,但我只能使用一种样式。 plunkr
$scope.showSteps=function(){
$scope.isOK=true;
$scope.showStyle = 'height:482px';
};
$scope.showHowWorks=function(){
$scope.isOK=true;
$scope.showStyle = 'height:312px';
};
$scope.showTerms=function(){
$scope.isOK=true;
$scope.showStyle = 'height:100px';
};
$scope.showYourself=function(){
$scope.isOK=true;
$scope.showStyle = 'height:600px';
};
HTML
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
<h2 class="panel-title">Tabs</h2>
</div>
<div class="panel-body">
<tabset justified="true">
<tab heading="How It Works" select='showHowWorks()'>
<div>How It Works</div>
</tab>
<tab heading="Healthcare On Your Own Terms" select='showTerms()'>
<div>Healthcare On Your Own Terms</div>
</tab>
<tab heading="Stay Healthy In 3 Steps" select='showSteps()'>
<div>Stay Healthy In 3 Steps</div>
</tab>
<tab heading="Educate Yourself" select='showYourself()'>
<div>EducateYourself</div>
</tab>
</tabset>
</div>
</div>
</div>
<div class=" col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
<h2 class="panel-title">Column</h2>
</div>
<div class="panel-body" ng-if="isOK" ng-style="myStyle={{myStyle}}">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
</div>
答案 0 :(得分:1)
将您的节目样式更改为:
$scope.showStyle = { height: '482px' };
然后你可以在你的dom中使用它:
ng-style="showStyle"