Question

我是使用angularjs的新手，我在md-tabs上遇到了一些问题。下一个按钮正在工作，但是当我再次单击第一个选项卡时，下一个按钮不再起作用。你能看看我的代码并告诉我错误吗？谢谢！

查看

<div class="row">
<div class="col-md-12" ng-class="{ 'blur' : vm.preloader.action }">
    <md-tabs md-dynamic-height md-border-bottom md-selected="selectedIndex">
        <md-tab label="Campaign Details">
            <md-content class="md-padding">
                <div class="md-content">
                    <div class="row" style="margin-top: 3%;">
                        <div class="col-md-6">
                        Content 1
                        </div>
                    </div>
                    <br>
                    <div class="row">
                        <div class="col-md-3">
                            <button class="btn btn-primary btn-lg" style="border-radius: 0; padding-right: 50px; padding-left: 50px; width: 100%;" ng-click="nextTab()">NEXT</button>
                        </div>
                    </div>
                </div>
            </md-content>
        </md-tab>
        <md-tab label="Recipients">
            <md-content class="md-padding">
                <div class="md-content">
                    <div class="row">
                        Content 2
                    </div>
                    <div class="row">
                        <div class="col-md-3">
                            <button class="btn btn-primary btn-lg" ng-click="nextTab()" style="width: 100%;">NEXT</button>
                        </div>
                    </div>
                </div>

            </md-content>
        </md-tab>
        <md-tab label="Confirm">
            <md-content class="md-padding" ng-show="show_send_to_all">
                <div class="md-content">
                    <div class="row" style="margin-top: 3%;">
                        Content 3
                    </div>


                    <div class="row">
                        <div class="col-md-3">
                            <button class="btn btn-primary btn-lg" ng-click="" style="width: 100%;">SEND</button>
                        </div>
                    </div>
                </div>

            </md-content>
        </md-tab>
    </md-tabs>
</div>

控制器：

    (function(){
   'use strict';

   angular
      .module('app')
      .controller('SmsManagementController', SmsManagementController);

   SmsManagementController.$inject = ['$rootScope', 'PreloaderService', 'ToastService', '$mdDialog', 'CaptchaService', '$localStorage', 'StaffRole', 'API'];
   function SmsManagementController($rootScope, PreloaderService, ToastService, $mdDialog, CaptchaService, $localStorage, StaffRole, API) {
      var vm = this;

      // Variables  
      vm.totalrecord = { general: 0 };
      vm.publicKey = API.captchakey;
      vm.displayCaptcha = !($.inArray($localStorage.currentUser.role, StaffRole) > -1);
      vm.preloader = {
         general: true
      }; 



      // Initialization
      Initialize();


      // Public functions
      function Initialize(){   
         PreloaderService.Display();
         PreloaderService.Hide(); 
      } 

      //Tabs
      $rootScope.max = 2;
      $rootScope.selectedIndex = 0;
      $rootScope.nextTab = function() {
         var index = ($rootScope.selectedIndex == $rootScope.max) ? 0 : $rootScope.selectedIndex + 1;
         $rootScope.selectedIndex = index;

      };

    } 

})();

或者你可以建议一个代码，我将如何在jquery或javascript上转换它，以便我有一个下一个按钮的选项卡。我正在使用angularjs的材料设计标签。

Answer 1

您的“下一步”按钮无法正常工作，因为您在next()方法中对$rootscope进行了迭代，请对$scope进行迭代。

$scope.max = 2;
$scope.selectedIndex = 0;
$scope.nextTab = function() {
  var index = ($scope.selectedIndex == $scope.max) ? 0 : $scope.selectedIndex + 1;
  $scope.selectedIndex = index;
};

您使用的是controllerAs语法，因此请使用vm代替$scope，并在此处传递vm.selectedIndex

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

Answer 2

最后，我想通了。

我没有使用$rootscope，而是将其更改为vm。所以，这是我的新标签代码：

//Tabs
  vm.max = 2;
  vm.selectedIndex = 0;
  $rootScope.nextTab = function() {
     var index = (vm.selectedIndex == $rootScope.max) ? 0 : vm.selectedIndex + 1;
     vm.selectedIndex = index;

  };

基于@Rakeschand解决方案，我通过vm.selectedIndex这样：

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

感谢@Rakeschand的想法：）

Md-tabs AngularJS仅工作一次

2 个答案: