Question

I want to use the tabs provided from Angular Material in order to have two different options for my application. The tabs are located in the navbar of my application. However the tab switching should just trigger a click-event as the main content of both tabs is the same (below the navbar).

So now, I tried using the md-tabs without any content just with a ng-click, but that does not seem to work.

Oc I could use sime buttons in my navbar, but I want to have the annimation and the red line of the material tabs, which seems not possible with the buttons.

Anyone knows how to solve my problem?

Code right now:

<md-content flex="" layout-padding="" class="md-small">
  <md-toolbar>
    <div class="md-toolbar-tools">
      <h2>
        <span ng-click="moveTo(53.534980, 9.975195)">Some Header</span>
      </h2>
      <span flex="5"></span>


        <md-tabs class="md-accent" md-selected="data.selectedIndex" md-align-tabs="top">
          <md-tab id="tab1">
            <md-tab-label>Item One</md-tab-label>
            <md-tab-body>
            </md-tab-body>
          </md-tab>
          <md-tab id="tab3">
            <md-tab-label>Item Three</md-tab-label>
            <md-tab-body>
            </md-tab-body>
          </md-tab>
        </md-tabs>

      <span flex=""></span>
      <md-button class="md-icon-button md-primary"  aria-label="Settings" ng-click="toggleRight()">
        <md-icon md-svg-icon="images/menu.svg"></md-icon>
      </md-button>
    </div>
  </md-toolbar>
    <span flex></span>
</md-content>

Answer 1

您可以在md-on-select="dosomething()"上使用tab。

    <md-tabs class="md-accent" md-selected="data.selectedIndex" md-align-tabs="top">
      <md-tab id="tab1" md-on-select="doThis()">
        <md-tab-label>Item One</md-tab-label>
        <md-tab-body>
        </md-tab-body>
      </md-tab>
      <md-tab id="tab3" md-on-select="doThat()">
        <md-tab-label>Item Three</md-tab-label>
        <md-tab-body>
        </md-tab-body>
      </md-tab>
    </md-tabs>

Answer 2

@threxx this就是我的意思。我希望这对你有用：

<html lang="en" >
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Angular Material style sheet -->
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
</head>
<body ng-app="BlankApp" ng-cloak>
  <md-toolbar>
    <div class="md-toolbar-tools">
      <h2>
        <span ng-click="moveTo(53.534980, 9.975195)">Some Header</span>
      </h2>
      <span flex=""></span>
      <md-button class="md-icon-button md-primary"  aria-label="Settings" ng-click="toggleRight()">
        <md-icon md-svg-icon="images/menu.svg"></md-icon>
      </md-button>
    </div>
  </md-toolbar>
  <md-tabs class="md-primary" md-selected="data.selectedIndex" md-align-tabs="top">
         <md-tab id="tab1">
            <md-tab-label>Item One</md-tab-label>
            <md-tab-body>
              Hi
            </md-tab-body>
          </md-tab>
          <md-tab id="tab3">
            <md-tab-label>Item Three</md-tab-label>
            <md-tab-body>
              Hello
            </md-tab-body>
          </md-tab>
   </md-tabs>

  
  <!-- Angular Material requires Angular.js Libraries -->
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>

  <!-- Angular Material Library -->
  <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
  
  <!-- Your application bootstrap  -->
  <script type="text/javascript">    
    /**
     * You must include the dependency on 'ngMaterial' 
     */
    angular.module('BlankApp', ['ngMaterial']);
  </script>
  
</body>
</html>

<!--
Copyright 2016 Google Inc. All Rights Reserved. 
Use of this source code is governed by an MIT-style license that can be in foundin the LICENSE file at http://material.angularjs.org/license.
-->

md-tabs with same content Angular Material

2 个答案: