ng-switchはmd-tabsで動作しません

を条件としてng-switchを作成しようとしています。 ng-ifでうまく動作しますが、がないので、ng-switch-defaultに感謝します。私もこの例でthis codepenを書いたng-switchはmd-tabsで動作しません

angular.module('app', ['ngMaterial']) 
.controller('all', function($scope, $element) { 
    $scope.tabs = [ 
    {label: 'tab1'}, 
    {label: 'tab2'}]; 
});

：

<div ng-controller="all"> 
    <select ng-switch="var"> 
    <option value="t1">Type 1</option> 
    <option value="t2">Type 2</option> 
    </select> 
    <md-tabs ng-switch="var"> 
    <md-tab ng-switch-when="t1" label="{{tab.label}}" ng-repeat="tab in tabs"> 
     <!-- content for tabs using type 1 --> 
    </md-tab> 
    <md-tab ng-switch-when="t2" label="{{tab.label}}" ng-repeat="tab in tabs"> 
     <!-- content for tabs using type 2 --> 
    </md-tab> 
    </md-tabs> 
</div>

とスクリプト：

は、ここでの例のHTMLです。何が間違っていますか？あなたはdivの内側にラップする必要が

出典

2017-01-02 raphaelbs

、

DEMO

<html> 
 

 
<head> 
 
    <title>angular material switch</title> 
 
    <link rel="stylesheet" href="//rawgit.com/angular/bower-material/master/angular-material.css"> 
 
</head> 
 

 
<body> 
 
    <div ng-app="app" ng-controller="ctrl"> 
 
    <md-input-container> 
 
     <md-select ng-model="selected"> 
 
     <md-option value="t1">Type 1</md-option> 
 
     <md-option value="t2">Type 2</md-option> 
 
     </md-select> 
 
    </md-input-container> 
 

 

 

 
    <div ng-switch="selected"> 
 
     <div ng-switch-when="t1"> 
 
     <md-tabs> 
 
      <md-tab label="{{tab.label}}" ng-repeat="tab in tabs"> 
 
      <!-- content for tabs using type 1 --> 
 
      </md-tab> 
 
     </md-tabs> 
 
     </div> 
 
     <div ng-switch-when="t2"> 
 
     <md-tabs> 
 
     <md-tab label="{{tab.label}}" ng-repeat="tab in tabs"> 
 
      <!-- content for tabs using type 2 --> 
 
     </md-tab> 
 
     </md-tabs> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 

 

 
    <!-- Angular Material Dependencies --> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.js"></script> 
 
    <script src="//cdn.jsdelivr.net/hammerjs/2.0.4/hammer.min.js"></script> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.min.js"></script> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-aria.min.js"></script> 
 

 
    <!-- Angular Material Javascript now available via Google CDN; version 0.6 used here --> 
 
    <script src="//rawgit.com/angular/bower-material/master/angular-material.min.js"></script> 
 

 

 
    <script> 
 
    var app = angular.module('app', ['ngMaterial']); 
 

 
    app.controller("ctrl", function($scope) { 
 
     $scope.selected; 
 
     $scope.tabs = [{ 
 
     label: 'tab1' 
 
     }, { 
 
     label: 'tab2' 
 
     }]; 
 
    }); 
 
    </script> 
 
</body> 
 

 
</html>

出典

2017-01-02 16:55:40 Sajeetharan

ng-switchはmd-tabsで動作しません

答えて

関連する問題