ng-switch 不适用于 md-tabs答案

【问题标题】：ng-switch not working with md-tabsng-switch 不适用于 md-tabs
【发布时间】：2017-01-02 16:05:26
【问题描述】：

我正在尝试使用ng-switch 创建条件md-tabs。我知道ng-if 可以正常工作，但我非常感谢ng-switch-default，因为没有ng-else。

这是一个示例 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。我做错了什么？

【问题讨论】：

标签： angularjs angular-material ng-switch

【解决方案1】：

你需要包裹在一个div里面，

演示

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

【讨论】：