2013-07-17 15 views
8

में प्रारंभिक स्थैतिक टैब सेट करना मुझे एक कोणीय बूटस्ट्रैप टैबसेट में आंतरिक टैब सेट करने में सक्षम नहीं लगता है। यह हमेशा बाएं अधिकांश टैब को सक्रिय करने के लिए सेट करता है।कोणीय बूटस्ट्रैप

एचटीएमएल को देखते हुए:

<tabset> 
    <tab heading="Static 1" active="data.static1">Static content</tab> 
    <tab heading="Static 2" active="data.static2">Static content</tab> 
</tabset> 

और js:

angular.module('plunker', ['ui.bootstrap']); 
var TabsDemoCtrl = function ($scope) { 
    $scope.data = {static1: false, static2: true} 
}; 

देखें Plunker

अपडेट 6 अगस्त 2013: अब नदी के ऊपर तय github issue देखते हैं।

+0

मैंने एक नया उत्तर जोड़ा क्योंकि यह अभी भी संस्करण 0.6.0 में एक मुद्दा है और यह प्रश्न Google में उच्च है। – Thomas

उत्तर

12

ऐसा लगता है कि (स्थैतिक) टैब निर्देशित होने पर सक्रिय होने पर जो कुछ भी पारित किया जाता है उसे ओवरराइट करता है। मुझे लगता है कि यह एक बग है। त्वरित और गंदा, आप सक्रिय स्थिति सेट करने के लिए 0 सेकंड देरी के साथ एक टाइमआउट का उपयोग कर सकते हैं। कम से कम प्लंकर में, यह किसी भी झिलमिलाहट का कारण नहीं है। अपने नियंत्रक में:

$scope.data = {}; 
$timeout(function() { 
    $scope.data.static2 = true; 
}, 0) 

http://plnkr.co/edit/3KbdKh?p=preview

3

कोणीय-ui के सभी संस्करणों में एक मुद्दा नहीं है/तक संस्करण 0.6.0 बूटस्ट्रैप:

http://plnkr.co/edit/73lm068buZf851h47FVQ?p=preview

यह bootstrap3 शाखा में काम करता है जिसे आपको स्वयं बनाना है:

http://plnkr.co/edit/uOASvZ71DzgZqODmHQP8?p=preview

+1

जानकारी के लिए धन्यवाद। यदि लोग उत्सुक हैं [खींचें # 834] (https://github.com/angular-ui/bootstrap/pull/834) इस समस्या को ठीक करते हैं। लाइन 237-239 लाइनों को हटाने में महत्वपूर्ण बदलाव हैं (मैंने उन परिवर्तनों के साथ कोणीय ui के अपने संस्करण को पैच किया - मैं स्वतंत्र रूप से उसी निष्कर्ष निष्कर्ष पर आया)। – Amir

2

मैं आज इस मुद्दे था और मैं इसे एनजी-init का उपयोग कर इसे स्थापित करने के लिए था चारों ओर पाने के लिए सबसे छोटा रास्ता मिल गया:

<tabset justified="true" ng-init="tabs[initialTab].isActive = true"> 
    <tab heading="Static 1" active="tabs.Inprogress.isActive"></tab> 
    ... 
+0

अरघ - धन्यवाद, धन्यवाद। मैं पहले प्रोग्रामेटिक रूप से किसी भी टैब का चयन कर सकता हूं - एनजी-इनिट के साथ, यहां तक ​​कि पहले वाला अब भी काम करता है। मैं कोशिश कर रहा 2 घंटे खो दिया है - तो निराशाजनक! – Leo

0

आपका कोड (यूआई-बूटस्ट्रैप के नवीनतम संस्करण का परीक्षण किया संस्करण 0.7 में काम करता है .0 समावेशी के माध्यम से 0.13.0):
http://plnkr.co/edit/SzeTqXVSd8CiKL9nkjDC?p=preview

HTML:

<!DOCTYPE html> 
<html ng-app="myApp"> 

    <head> 
    <script data-require="[email protected]" data-semver="1.4.0" src="https://code.angularjs.org/1.4.0/angular.js"></script> 
    <script data-require="[email protected]" data-semver="0.13.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.min.js"></script> 
    <link data-require="[email protected]*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" /> 
    <script src="script.js"></script> 
    </head> 

    <body ng-controller="ExampleController as example"> 
    <tabset> 
     <tab heading="Static 1" active="data.static1">Static content1</tab> 
     <tab heading="Static 2" active="data.static2">Static content2</tab> 
    </tabset> 
    </body> 

</html> 

जावास्क्रिप्ट:

के बारे में पता होना करने के लिए
angular.module("myApp", ["ui.bootstrap"]) 
    .controller("ExampleController", function ($scope) { 
    $scope.data = { 
     static1: false, 
     static2: true 
    }; 
    }); 

एक पकड़ लिया है कि इस करता है, तो ngController निर्देश <tabset> तत्व पर रखा गया है काम नहीं करेगा है। उपरोक्त कोड में, मैंने ngController निर्देश < शरीर > तत्व पर निर्देश दिया है।

संबंधित मुद्दे