angularjs - यह बताने के लिए कि कोणीय-यूआई में किस बूटस्ट्रैप टैब का चयन किया गया है




twitter-bootstrap angular-ui (4)

क्या यह बताने का कोई तरीका है कि कोणीय UI में बूटस्ट्रैप टैब का उपयोग करते समय किस टैब को चुना गया है?

मैंने पैनस ऐरे को देखने की कोशिश की, लेकिन टैब स्विच करते समय यह अपडेट नहीं हुआ। जब कोई टैब चुना जाता है तो क्या कोई कॉलबैक फ़ंक्शन निर्दिष्ट कर सकता है?

कोड उदाहरण के साथ अद्यतन करें।

कोड बहुत अधिक कोणीय यूआई बूटस्ट्रैप पेज से उदाहरण का अनुसरण करता है।

मार्कअप:

<div ng-controller="TabsDemoCtrl">
    <tabs>
        <pane ng-repeat="pane in panes" heading="{{pane.title}}" active="pane.active">
            <div ng-include="pane.template"></div>
        </pane>
    </tabs>
</div>

नियंत्रक:

var TabsCtrl = function ($scope) {
  $scope.panes = [
    { title:"Events list", template:"/path/to/template/events" },
    { title:"Calendar", template:"/path/to/template/calendar" }
  ];
};

मेरा उत्तर उस मामले के लिए है जिसे आप मैन्युअल रूप से टैब में रखते हैं और आप कोणीय यूआई बूस्टर लाइब्रेरी का उपयोग कर रहे हैं, आप select विशेषता select उपयोग कर सकते हैं

<uib-tabset class="main-nav">
  <uib-tab select="showTab('a')">
    <uib-tab-heading>a</uib-tab-heading>
    <div class="tab-content"> <span>a</span></div>
  </uib-tab>
  <uib-tab select="showTab('b')">
    <uib-tab-heading>b</uib-tab-heading>
    <div class="tab-content"> <span>b</span></div>
  </uib-tab>
</uib-tabset>

select विशेषता में पास होने वाले showTab फ़ंक्शन में, आप जांच सकते हैं कि आपके टैब का चयन मेरे नाम की तरह है या नहीं।

पूरा उदाहरण कोणीय यूआई से है, ध्यान दें:


मैंने इसे कंट्रोलर पर एक विधि (onTabSelect) जोड़कर और इसे टैब के एनजी-क्लिक इवेंट से कॉल करके हल किया। नीचे दिए गए समाधान ने मेरे लिए काम किया कृपया इसे कार्रवाई में देखें

function myTabController($scope) {
  $scope.onTabSelect = function(tabName) {
    $scope.selectedTabName = tabName;
    console.log("Changed tab to " + tabName);
  }


  <tabset>
    <tab ng-click="onTabSelect('A')">
      <tab-heading>
        A
      </tab-heading>
    </tab>
    <tab ng-click="onTabSelect('B')">
      <tab-heading>
        B
      </tab-heading>
    </tab>
  </tabset>

वास्तव में यह वास्तव में सरल है क्योंकि प्रत्येक pane active विशेषता को उजागर करता है जो 2-तरफ़ा डेटा बाइंडिंग का समर्थन करता है:

<tabs>
    <pane ng-repeat="pane in panes" heading="{{pane.title}}" active="pane.active">      
        {{pane.content}}
    </pane>
</tabs>

और फिर एक सक्रिय टैब आसानी से पाया जा सकता है, उदाहरण के लिए:

$scope.active = function() {
    return $scope.panes.filter(function(pane){
      return pane.active;
    })[0];
};

यहाँ एक काम कर रहा है


स्वीकृत उत्तर केवल गतिशील टैब के लिए काम करता है।

स्थैतिक टैब के लिए, आप uib-tabset निर्देश के active गुण को एक स्कोप प्रॉपर्टी में सेट कर सकते हैं, और सक्रिय टैब को खोजने के लिए टैब इंडेक्स के साथ इसकी तुलना कर सकते हैं।

उदाहरण के लिए, नीचे दिए गए कोड में मैं सक्रिय टैब हेडर पर एक वर्ग सेट करने के लिए ऐसा कर रहा हूं (मैं ui.bootstrap द्वारा जोड़े गए active वर्ग का उपयोग कर सकता हूं और उसी परिणाम को प्राप्त कर सकता हूं, मैं एक उदाहरण के रूप में ऐसा कर रहा हूं):

angular.module('test', ['ngAnimate', 'ui.bootstrap']);
@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css");
 .test {
  background: dodgerblue;
}
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script>

<div ng-app="test">
  <uib-tabset active="active">
    <uib-tab index="0">
      <uib-tab-heading ng-class="{test:active==0}">Static title1</uib-tab-heading>Static content1
    </uib-tab>
    <uib-tab index="1">
      <uib-tab-heading ng-class="{test:active==1}">Static title1</uib-tab-heading>Static content2</uib-tab>
    <uib-tab index="2">
      <uib-tab-heading ng-class="{test:active==2}">Static title1</uib-tab-heading>Static content3</uib-tab>
  </uib-tabset>
</div>





bootstrap-tabs