Wie wähle ich eine Registerkarte in angular-ui? (AngularJS)

Ich möchte die letzte Registerkarte auswählen, irgendeine Idee, wie man das macht? Nur die Tabs innerhalb des ng-repeats können ausgewählt werden. Ich werde kein ng-repeat verwenden, wie kann ich es ohne ng-repeat machen?Wie wähle ich eine Registerkarte in angular-ui? (AngularJS)

Hier ist der Arbeitscode: 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>

Quelle

2016-01-04 lito

Sie nicht, dass die Lasche an der 'tabs' Zugabe collection..Should hinzugefügt werden? Oder sollte es getrennt sein? –

Hallo! Ich mag es getrennt. Ich möchte keine ng-Wiederholung verwenden, Danke! – lito

Alles, was ich tat, war ein neues Objekt initialisieren neue Registerkarte zu halten, und Ihre Referenz in der Taste ändern. Es löst dein Problem, aber ich habe keine Ahnung, ob es deine gewünschte Architektur ist.

Hier sind die Highlights:

$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>

die hier plnkr

Quelle

2016-01-04 20:51:53

ja, Danke! Das wird den Job erledigen, ich habe versucht, ng-Modell zu verwenden, aber es scheint einfacher zu sein. Glauben Sie, dass es keine Möglichkeit gibt, ein Objekt "$ scope.separateTab = {};" in der Steuerung? – lito

Wie soll es gefahren werden? Wir gehen über den Rahmen der Frage hinaus, aber ich habe keine Ahnung, wie Sie Ihre Daten laden. Tabs können ein Objekt mit Arrays verschiedener Tabs sein. Aber ich weiß nicht, wie ich deine Frage ohne weitere Informationen beantworten soll. –

Hier wird, falls jemand meinen Code ein anderes Beispiel benötigen:

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>

Quelle

2016-01-04 21:17:22 lito

Eine Möglichkeit, erreichen ist, das aktive Attribut von zu setzen uib-Register, so etwas wie folgt aus:

<uib-tabset active="activeForm">

(https://plnkr.co/edit/Yn4YomuwDfTmBU3J8yl1?p=preview)

Quelle

2016-12-13 09:54:56

Wie wähle ich eine Registerkarte in angular-ui? (AngularJS)

Antwort

Verwandte Themen