2016-10-03 28 views
0

角度のある素材のタブに問題があります.HTMLの反対側のタブを削除する必要があります.HTML全体をラップしないでください。 ここ角度のある材料のタブカスタムHTML

<md-content> 
    <md-tabs md-dynamic-height md-border-bottom> 
     <md-tab label="1"> 
      <md-content class="md-padding">1</md-content> 
      </md-tab> 
     <md-tab label="2"> 
      <md-content class="md-padding">2</md-content> 
     </md-tab> 
</md-tabs> 
</md-content> 

OK取り組んでいるデフォルトのタブを持つ例ですが、私はどのように作る方法

**md-on-select="" md-on-deselect=""** 

しかし、上のオプションがあり、私が知っているこの

<md-tabs md-dynamic-height md-border-bottom> 
    <md-tab label="1"> 
    </md-tab> 
    <md-tab label="2"> 
    </md-tab> 
</md-tabs> 


<div class="main"> 
    <md-content class="md-padding">1</md-content> 
    <md-content class="md-padding">2</md-content> 
</div> 

のようなものを持っている必要がありますそれは私の場合?ここで

+0

?ユーザーのストーリーを提供できますか? – hurricane

+0

デザインのためにhtmlにカスタム要素が必要なので –

答えて

2

あなたが行く - CodePen

リンクをメインdivng-switchmd-tabsmd-selected属性。あなたが説明することができますが、これが必要なのはなぜ

マークアップ

<div ng-controller="AppCtrl as vm" ng-cloak="" ng-app="MyApp"> 
    <md-tabs md-dynamic-height md-border-bottom md-selected="vm.selectedIndex"> 
     <md-tab label="1"> 
     </md-tab> 
     <md-tab label="2"> 
     </md-tab> 
    </md-tabs> 

    <div class="main" ng-switch="vm.selectedIndex"> 
     <md-content class="md-padding" ng-switch-when="0">1</md-content> 
     <md-content class="md-padding" ng-switch-when="1">2</md-content> 
    </div> 
</div> 

JS

angular.module('MyApp',['ngMaterial']) 

.controller('AppCtrl', function() { 
    this.selectedIndex = 0; 
});