ng-switch不适用于MD-tabs

我正在尝试使用 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'}];
});

我还用这个例子写了这个代码笔。我做错了什么？

你需要包装在一个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>

相关内容

最新更新

热门标签：