ng-switch not working with md-tabs

Question

ng-switch not working with md-tabs

586 views Asked by raphaelbs At 20 November 2024 at 06:56

I'm trying to create conditional md-tabs using ng-switch. I know that works fine with ng-if but I would much appreciate the ng-switch-default since there isn't ng-else.

Here's a example 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>

and the script:

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

I also wrote this codepen with this example. What am i doing wrong?

Original Q&A

There are 1 answers

**Sajeetharan** · Accepted Answer · 2017-01-02 16:55:40

You need to wrap inside a 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>

TechQA.

ng-switch not working with md-tabs

There are 1 answers

Related Questions in ANGULARJS

Related Questions in ANGULAR-MATERIAL

Related Questions in NG-SWITCH

Popular Questions

Popular Tags

Trending Questions