Question

<div ng-cloak>
  <md-content>
   <md-tabs md-dynamic-height md-border-bottom>
  <md-tab label="one">
     <md-content class="md-padding">
        <h1 class="md-display-2">Tab One</h1>          
             <md-button class="md-raised">Save & Next</md-button>
    </md-content>
  </md-tab>
  <md-tab label="two"  ng-disabled="true">
    <md-content class="md-padding">
      <h1 class="md-display-2">Tab Two</h1>          
     <md-button class="md-raised">Save & Back </md-button>
    </md-content>
  </md-tab>      
</md-tabs>

我正在使用角度+角度素材，有两个标签菜单“One”和“Two”当我点击“Save＆amp; Next”按钮时，下一个标签应该启用，而foucs会转到下一个标签，反之则应该发生当我点击第二个标签“保存并返回”按钮

时

Answer 1

md-tabs上的

md-selected显示了选项卡的当前索引。您可以通过单击按钮更改索引。应该类似于以下

<div ng-cloak>
 <md-content>
  <md-tabs md-dynamic-height md-border-bottom md-selected="myTabIndex">
   <md-tab label="one">
    <md-content class="md-padding">
    <h1 class="md-display-2">Tab One</h1>          
         <md-button class="md-raised" ng-click="myTabIndex = myTabIndex+1">Save & Next</md-button>
    </md-content>
   </md-tab>
   <md-tab label="two"  ng-disabled="true">
    <md-content class="md-padding">
     <h1 class="md-display-2">Tab Two</h1>          
     <md-button class="md-raised" ng-click="myTabIndex = myTabIndex-1">Save & Back </md-button>
    </md-content>
   </md-tab>      
</md-tabs>

但您现在应该禁用下一个或上一个选项卡，此方法不起作用，因为您无法切换到已禁用的选项卡。

Answer 2

您可以使用js中的功能更改标签。

mean()

<。>在.js

<md-button class="md-raised" ng-click="changetab('n')">Save & Next</md-button>
<md-button class="md-raised" ng-click="changetab('b')">Save & Back</md-button>

Answer 3

在md-tab中，您可以使用 md-active ="scopeName"。

md-active 如果为true，则设置活动标签。注意：只能有一个活动标签一次。

创建一个包含所有标签活动信息的scopeArray。并在md-active中使用scopeArray [index]。

使用按钮单击更改选项卡

3 个答案: