एकाधिक 'एमडी-टैब' में एक ही समय में 'एमडी-एक्टिव' क्लास है जब मैं अक्सर कोणीय एमडी-चयनित इंडेक्स

Question

के साथ टैब स्विच करता हूं, जब मैं अक्सर एमडी-टैब स्विच कर रहा हूं, तो एमडी-टैब सही ढंग से स्विच हो रहे हैं लेकिन एकाधिक एमडी- टैब-आइटम तत्वों में एक ही समय में 'एमडी-एक्टिव' क्लास होती है, इसलिए मैं टैब की सामग्री को सक्रिय नहीं देख सकता क्योंकि यह सक्रिय टैब की सामग्री से ओवरलैप है।

मेरे अनुसार, कोणीय-सामग्री में, जब हम एक टैब का चयन करते हैं, तो कोणीय पहले पिछले टैब को अचयनित करता है (पृष्ठ पर पहले प्रदर्शित सामग्री को छुपाएं) और चयनित टैब सामग्री प्रदर्शित करता है। इस प्रक्रिया को करने के दौरान, कोणीय पहले सक्रिय टैब के 'एमडी-सक्रिय' वर्ग को हटाने से चूक जाता है।

व्यवहार को पुन: उत्पन्न करने के लिए यहां पहेली है। यह यादृच्छिक व्यवहार है और समवर्ती क्लिक के दौरान आता है।

कृपया 'स्विच टैब' बटन पर क्लिक करने के बाद 1 मिनट के लिए प्रतीक्षा jsFiddle

angular.module('firstApplication', ['ngMaterial']).controller('tabController', tabController); 
 

 
      function tabController ($scope) {    
 

 
      $scope.boards = Array.from(Array(100).keys()); 
 

 
      $scope.data = { 
 
       selectedIndex: 0, 
 
       secondLocked: true, 
 
       secondLabel: "2", 
 
       bottom:  false 
 
      }; 
 
      $scope.next = function() { 
 
       $scope.data.selectedIndex = Math.min($scope.data.selectedIndex + 1, 2) ; 
 
      }; 
 
      $scope.previous = function() { 
 
       $scope.data.selectedIndex = Math.max($scope.data.selectedIndex - 1, 0); 
 
       
 
      }; 
 
      $scope.switch = function() { 
 
       $scope.activeTabsCounter = $("md-tab-item.md-active").length; 
 
      } 
 
       
 
       
 
      /********* Here i am changing tabs  ****8**/ 
 
      
 
      /******** This is strict behaviour where I get the problem but randomly *****/ 
 
      $scope.switchTabs = function(){ 
 
      clearInterval(interval); 
 
      var i = $scope.boards.length - 1; 
 
      var interval = setInterval(function() { 
 
      \t if($scope.activeTabsCounter == 1) { 
 
       \t if(i >= 0) \t \t \t \t \t     
 
       $(".md-accent md-tab-item")[i--].click(); 
 
       $scope.switchTabs(); 
 
       } else { 
 
       clearInterval(interval); 
 
       } 
 
      \t \t 
 
      }, 100); 
 
      
 
      /********* /Here i am changing tabs  ****8**/ 
 
      
 
      } 
 
      } 
 
      
 
      
 
     

<link href="https://rawgit.com/angular/bower-material/master/angular-material.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.js"></script> 
 
<script src="https://rawgit.com/angular/bower-material/master/angular-material.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-animate.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-aria.js"></script> 
 
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
 

 
<div ng-app="firstApplication"> 
 
     <div id="tabContainer" ng-controller="tabController as ctrl" ng-cloak> 
 
     <div> <br><br> 
 
     <button ng-click="switchTabs()">Click here to switch tabs</button> 
 
     <br><br> 
 
     Current active Tabs: {{activeTabsCounter}} 
 
     <br> 
 
     </div> 
 
     <md-content class="md-padding"> 
 
      <md-tabs class="md-accent" md-selected="data.selectedIndex" md-align-tabs="{{data.bottom ? 'bottom' : 'top'}}"> 
 
       <md-tab md-on-select="switch()" id="tab{{board}}" ng-repeat="board in boards"> 
 
        <canvas id="canvas-{{board}}-1" width="1600" height="900"></canvas> 
 
        <canvas id="canvas-{{board}}-2" width="1600" height="900"></canvas> 
 
        <md-tab-label>{{board}}</md-tab-label> 
 
        <md-tab-body>Item #{{board}} <br/>selectedIndex = {{board}};</md-tab-body> 
 
       </md-tab> 
 
      </md-tabs> 
 
     </md-content> 
 
     </div> 
 
    </div>

मैं 100 एमएस में लेकिन हमारे आवेदन में टैब स्विच कर रहा है, हम में इस समस्या को हो रही है लंबे समय अंतराल भी। हम सॉकेट का उपयोग कर बोर्ड स्विच इवेंट उत्सर्जित कर रहे हैं।

Answer 1

के रूप में मैं समझता हूँ, अपने विचार प्रोग्राम के रूप में हर एक्स सेकंड टैब बदलने है तो ...

सबसे पहले, उपयोग AngularJS setInterval() के बजाय $interval (कि है, क्योंकि setInterval() कोणीय डाइजेस्ट के बारे में परवाह नहीं है)।
दूसरे, आप के बजाय click() घटना ...
अंत में, सक्रिय टैब चेक निकालने के बुलाने की selectedIndex अपडेट करना पड़ता है (मुझे लगता है कि आप परीक्षण के लिए जोड़ा)

मैं अपने jsFiddle

नवीनीकृत किया है

नियंत्रक:

function tabController($scope, $interval) { 

    $scope.boards = Array.from(Array(100).keys()); 
    $scope.data = { 
     selectedIndex: 0 
    }; 

    $scope.switchTabs = function() { 
     var size = $scope.boards.length - 1; 

     var interval = $interval(function() { 
      if(size >= 0){ 
       $scope.data.selectedIndex = size--; 
      }else{ 
       $interval.cancel(interval); 
      } 
     }, 750); 
    } 
} 

HTML:

<md-tabs class="md-accent" md-selected="data.selectedIndex"> 
    <md-tab ng-repeat="board in boards"> 
     <md-tab-label>{{board}}</md-tab-label> 
     <md-tab-body> 
      Item #{{board}}<br/> 
      selectedIndex = {{board}}; 
     </md-tab-body> 
    </md-tab> 
</md-tabs> 

Answer 2

के रूप में ओ पी ने एक टिप्पणी में कहा, इस मैन्युअल रूप से (प्रश्न में कोड में data.selectedIndex बदलने के माध्यम से) नए टैब को चुनने से पहले सभी टैब से एमडी सक्रिय वर्ग को हटाने के द्वारा हल किया गया था ।

हम में से जो लोग हमारे कोणीय में jQuery का उपयोग नहीं कर रहे हैं, जावास्क्रिप्ट इस तरह दिखता है:

function fixMdTabsActive(tabsId, currentIndex) 
{ 
    var tabs = angular.element(document.getElementById(tabsId)); 
    var elements = tabs.find('md-tab-item'); 
    for (var i = 0; i < elements.length; ++i) 
    { 
     if (i != currentIndex) 
     { 
      angular.element(elements[i]).removeClass('md-active'); 
     } 
    } 

    elements = tabs .find('md-tab-content'); 
    for (var i = 0; i < elements.length; ++i) 
    { 
     if (i != currentIndex) 
     { 
      angular.element(elements[i]).removeClass('md-active'); 
     } 
    } 
} 

Answer 3

मैं आंशिक रूप से मेरी MD-टैब परिभाषा करने के लिए एक md-active="$index == data.selectedIndex" जोड़कर मेरी कोड में इस समस्या का समाधान। सिद्धांत रूप में, इसकी आवश्यकता नहीं होनी चाहिए, लेकिन जब मैंने अपने टैब बनाए, तो मैं डेटा को सेट कर दूंगा। इंडेक्स को अंतिम टैब पर सेट किया जाएगा, और पहला और आखिरी सक्रिय होगा। इस लाइन को जोड़ने के बाद, यह ज्यादातर काम किया। मेरे पास एक दौड़ की स्थिति थी जिसने मुझे ओपी की टिप्पणी और मेरे अन्य (समुदाय) के जवाब में दस्तावेज के रूप में एमडी-सक्रिय कक्षा को हटाने के लिए मजबूर किया।