如何一起使用ng-if和ng-style

时间:2015-01-07 16:04:17

标签: angularjs

我试图将面板的高度与各个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>

1 个答案:

答案 0 :(得分:1)

将您的节目样式更改为:

$scope.showStyle = { height: '482px' };

然后你可以在你的dom中使用它:

ng-style="showStyle"