私は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の材料設計タブを使用しています。
あなたは新しい答え、私の答えを編集し、それを受け入れる – Rakeschand