在Angular md-tabs中停用第二个选项卡

时间:2016-10-14 08:49:13

标签: javascript html angularjs tabs angular-ui-bootstrap

角度材质md-tabs中是否有任何属性可以禁用类似于Bootstrap中的选项卡。

$scope.tabs = [{
    title: 'Dynamic Title 1',
    content: 'Dynamic content 1'
}, {
    title: 'Dynamic Title 2',
    content: 'Dynamic content 2',
    disabled: true
}];

这样的东西?

<div class="col-lg-12 col-md-12">
    <md-card-content id="nvd3-scrollable-content" style="height: 350px;"> 
                 <md-tabs md-dynamic-height md-border-bottom md-selected="selectedTab">
                      <md-tab ng-repeat="data in trendData" label="{{data.name}}">
                        <md-content class="md-padding" >
                         <div ng-if="data.name == 'FirstTab'">
                            <!-- some code-->
                        </div>

                         <div ng-if="data.name == 'SecondTab'">
                        <!-- some other code-->
                         </div>
                    </md-content>
                </md-tab>

            </md-tabs>
         </md-card-content>                      
    </div>

2 个答案:

答案 0 :(得分:0)

在角度材质中有一个属性'md-selected',您可以通过设置md-selected =“selectedTabIndex”使用它,让我告诉你:

<md-tabs md-selected="selectedTabIndex" md-dynamic-height md-border-bottom md-center-tabs="true" md-stretch-tabs='always'>
            <md-tab label="all" md-on-select="changeTab()">
                <md-content class="md-padding" flex>
                    <attendance-listing-content></attendance-listing-content>

                </md-content>
            </md-tab>
            <md-tab label="present" md-on-select="changeTab()">
                <md-content class="md-padding">
                    <attendance-listing-content></attendance-listing-content>
                </md-content>
            </md-tab>
            <md-tab label="absent" md-on-select="changeTab()">
                <md-content class="md-padding">
                    <attendance-listing-content></attendance-listing-content>
                </md-content>
            </md-tab>
        </md-tabs>

然后从你的控制器你只需要定义 $ scope.selectedTabIndex ='1'; ,那么在那种情况下,第一个标签将显示或激活,而其他标签相同。

答案 1 :(得分:0)

您可以使用mysqli指令

以下是Angularjs Docs

的示例

https://plnkr.co/edit/hOljQTwH5mSyUivEaipY?p=preview