Question

我想通过添加下一个按钮将<md-tab>设为向导。

我添加了我的代码并创建了一个带有下一个按钮的Plunker可以看看请添加您的代码以使其成为向导

Plunker已添加： - http://plnkr.co/edit/p9mMyaqqHWtVyAEeisd1?p=preview

 <md-content class="md-padding">
    <md-tabs md-dynamic-height="" md-border-bottom="">
      <md-tab label="one">
        <md-content class="md-padding">
          <h1 class="md-display-2">Tab One</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue. Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus. In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec, feugiat ultricies mi.</p>
           <md-button class="md-raised md-primary">Next</md-button>
        </md-content>
      </md-tab>
      <md-tab label="two">
        <md-content class="md-padding">
          <h1 class="md-display-2">Tab Two</h1>
          <p>Lorem  risus, pulvinar at interdum quis, vehicula sed odio. Phasellus in enim venenatis, iaculis tortor eu, bibendum ante. Donec ac tellus dictum neque volutpat blandit. Praesent efficitur faucibus risus, ac auctor purus porttitor vitae. Phasellus ornare dui nec orci posuere, nec luctus mauris semper.</p>

          <md-button class="md-raised md-primary">Next</md-button>
        </md-content>

      </md-tab>
      <md-tab label="three">
        <md-content class="md-padding">
          <h1 class="md-display-2">Tab Three</h1>
          <p>Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae hendrerit erat, at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci commodo volutpat non ac est. Praesent ligula diam, congue eu enim scelerisque, finibus commodo lectus.</p>
           <md-button class="md-raised md-primary">Finish</md-button>
        </md-content>
      </md-tab>
    </md-tabs>

Answer 1

您已在 md-tabs 标记 md-selected 属性中添加属性，以设置所选标签索引。所以首先你必须添加ng-controller

<md-content class="md-padding" ng-controller="tabCtrl">

绑定后，您绑定了selectedIndex

的值

 <md-tabs md-dynamic-height="" md-border-bottom="" md-selected="selectedIndex">

在必须添加ng-click到按钮以调用nextTab（）

之后

<md-button class="md-raised md-primary" ng-click="nextTab()">Next</md-button>

结束......这是你需要的控制器

// Code goes here
var moduler = angular.module('MyApp', ['ngMaterial']);
moduler.controller("tabCtrl", ['$scope', function($scope) {
  $scope.max = 2;
  $scope.selectedIndex = 0;
  $scope.nextTab = function() {
    var index = ($scope.selectedIndex == $scope.max) ? 0 : $scope.selectedIndex + 1;
    $scope.selectedIndex = index;

  };

}]);

我希望这个例子可以帮助你...

这里是plunker的例子，如你所愿

http://plnkr.co/edit/iNEXWXUBDvsrKgUSelkW?p=preview

Answer 2

您也可以使用向您服务的向导

github链接： - https://github.com/Matesign/material-wizard

示例代码如下

<mt-wizard btn-progress-color="#D8D8D8"  btn-bg-color="#FAFAFA" active-btn-bg-color="#E9E9E9" chevrons-always-visible="true" on-finish="submit()">
    <mt-wz-step title="Step 1" step-img="step1.svg" on-exit="onExitStep1()">
     </mt-wz-step>
</mt-wizard>

http://plnkr.co/edit/rp5qJykW2DD1A7EvaVZP?p=preview

如何使用ng-click将Angular Material选项卡设为向导？

2 个答案: