कोणीय-ui में एक टैब का चयन कैसे करें? (AngularJS)

मैं अंतिम टैब का चयन करना चाहता हूं, कोई विचार यह कैसे करना है? एनजी-दोहराना के अंदर केवल टैब चुनने के लिए उपलब्ध हैं, मैं एक एनजी-दोहराना नहीं उपयोग करूंगा, मैं इसे एनजी-दोहराने के साथ कैसे कर सकता हूं?कोणीय-ui में एक टैब का चयन कैसे करें? (AngularJS)

यहाँ काम कर कोड है: http://plnkr.co/edit/ZJNaAVDBrbr1JjooVMFj?p=preview

<!doctype html> 
<html ng-app="ui.bootstrap.demo"> 

<head> 
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"> 
</head> 

<body> 

    <div ng-controller="TabsDemoCtrl"> 
    <p>Select a tab by setting active binding to true:</p> 
    <p> 
     <button type="button" class="btn btn-default btn-sm" ng-click="tabs[0].active = true">Select second tab</button> 
     <button type="button" class="btn btn-default btn-sm" ng-click="tabs[1].active = true">Select third tab</button> 
     <button type="button" class="btn btn-default btn-sm" ng-click="tabs[3].active = true">SELECT LAST TAB!!!</button> 
    </p> 
    <p> 
     <button type="button" class="btn btn-default btn-sm" ng-click="tabs[1].disabled = ! tabs[1].disabled">Enable/Disable third tab</button> 
    </p> 
    <hr /> 

    <uib-tabset> 
     <uib-tab heading="Static title">Static content</uib-tab> 
     <uib-tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disable="tab.disabled"> 
     {{tab.content}} 
     </uib-tab> 
     <uib-tab heading="How to select this tab???">nico</uib-tab> 
    </uib-tabset> 
    </div> 

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script> 
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script> 
    <script type="text/javascript"> 
    angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']); 
    angular.module('ui.bootstrap.demo').controller('TabsDemoCtrl', function($scope, $window) { 
     $scope.tabs = [{ 
     title: 'Dynamic Title 1', 
     content: 'Dynamic content 1' 
     }, { 
     title: 'Dynamic Title 2', 
     content: 'Dynamic content 2', 
     disabled: true 
     }]; 
    }); 
    </script> 

</body> 

</html>

स्रोत

2016-01-04 lito

आप 'tabs' है कि टैब जोड़कर नहीं कर रहे हैं यह जोड़ा जा collection..Should? या यह अलग होना चाहिए? –

हाय! मुझे यह अलग पसंद है। मैं एक एनजी-दोहराना का उपयोग नहीं करना चाहता, धन्यवाद! – lito

सभी मैं एक नई वस्तु को प्रारंभ अपने नए टैब रखें, और बटन में आपके संदर्भ बदलने के लिए था। यह आपकी समस्या हल करता है लेकिन मुझे नहीं पता कि यह आपकी वांछित वास्तुकला है या नहीं।

$scope.separateTab = { 
    title: 'How to select this tab???', 
    content: 'Dynamic content 2' 
    }; 

<uib-tab heading="{{separateTab.title}}" active="separateTab.active">nico</uib-tab> 

<button type="button" class="btn btn-default btn-sm" ng-click="separateTab.active = true">SELECT LAST TAB!!!</button>

यहाँ plnkr

स्रोत

2016-01-04 20:51:53

हाँ, धन्यवाद! वह काम करेगा, मैं एनजी मॉडल का उपयोग करने की कोशिश कर रहा था लेकिन लगता है कि यह उससे आसान है। क्या आपको लगता है कि ऑब्जेक्ट बनाने से बचने का कोई तरीका है "$ scope.separateTab = {};" नियंत्रक में? – lito

इसे कैसे संचालित किया जाना चाहिए? हम जो सवाल सोचते हैं उसके दायरे से बाहर हो रहे हैं लेकिन मुझे नहीं पता कि आप अपना डेटा कैसे लोड कर रहे हैं। 'टैब 'अलग-अलग टैब के सरणी वाले ऑब्जेक्ट हो सकते हैं। लेकिन मुझे नहीं पता कि बिना किसी जानकारी के आपके प्रश्न का उत्तर कैसे दिया जाए। –

है यहाँ मामले में किसी को मेरी कोड कुछ अन्य उदाहरण की जरूरत है::

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

<!doctype html> 
<html ng-app="ui.bootstrap.demo"> 
<head> 
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"> 
</head> 
<body> 
    <div ng-controller="TabsDemoCtrl"> 
    <p>Select a tab by setting active binding to true:</p> 
    <p> 
     <button type="button" class="btn btn-default btn-sm" ng-click="tabs[1].active = true">SELECT SECOND TAB!!!</button> 
    </p> 
    <hr /> 
    <uib-tabset> 
     <uib-tab heading="First" active="tabs[0].active">{{tabs[0].text}}</uib-tab> 
     <uib-tab heading="Second" active="tabs[1].active">Second</uib-tab> 
    </uib-tabset> 
    </div> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script> 
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script> 
    <script type="text/javascript"> 
    angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']); 
    angular.module('ui.bootstrap.demo').controller('TabsDemoCtrl', function($scope, $window) { 
     $scope.tabs = [{text:"First Text"}, {},{},{}]; 
    }); 
    </script> 
</body> 
</html>

स्रोत

2016-01-04 21:17:22 lito

एक तरह से करने के लिए

यहाँ मुख्य आकर्षण हैं प्राप्त करने के लिए सक्रिय विशेषता सेट है UIB-टैब, कुछ इस तरह: