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

Question

I would like to Make <md-tab>s as Wizard by adding Next Button.

i added My code and created a Plunker with next Buttons Could guys take a look please add your code to make it wizard

添加了 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

you could use the Wizard also which serves your cause

github Link :- 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 选项卡设为向导？

How to Make Angular Material Tabs as Wizard with ng-click?

angularjs

angular-material