ng-switch не работает с md-tabs

Я пытаюсь создать условный md-tabs с помощью ng-switch. Я знаю, что отлично работает с ng-if, но я был бы очень признателен за ng-switch-default, так как там нет ng-else.ng-switch не работает с md-tabs

Вот пример HTML:

<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>

и сценарий:

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

Я также написал this codepen с этим примером. Что я делаю неправильно?

источник

2017-01-02 raphaelbs

Вам нужно обернуть внутри DIV,

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

ответ

Смежные вопросы