2017-02-20 5 views
1

Я новичок в использовании angularjs, и я сталкивался с некоторыми проблемами на md-tabs. Следующая кнопка работает, но когда я снова нажимаю на первую вкладку, следующая кнопка больше не работает. Не могли бы вы взглянуть на мои коды и рассказать мне, что случилось. Благодаря!Md-tabs AngularJS работает только один раз

VIEW

<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> 

CONTROLLER:

(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.

ответ

0

Наконец-то я это понял.

Вместо того, чтобы использовать $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 за идею :)

+0

Вы должны принять мой ответ, а не публиковать новые ответить, отредактировать мой ответ и принять его – Rakeschand

0

Вашей СЛЕДУЮЩАЯ кнопка не работает, потому что в вашем 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"> 
+0

привет @ rakeschand, я попробовал ваше решение, но он не работает. Следующая кнопка не работает полностью. – zuma

+0

воспроизвести эту ошибку в jsfiddle. Я решу, иначе это будет работать с вкладками, вы можете проверить на веб-сайте материального дизайна https://material.angularjs.org/latest/demo/tabs – Rakeschand