Question

我尝试使用md-tabs创建条件ng-switch。我知道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。我做错了什么？

Answer 1

你需要在div中包装，

<强>样本

＆＃13;

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

＆＃13;

ng-switch无法使用md-tabs

1 个答案: