Come selezionare una scheda in angular-ui? (AngularJS)

Voglio selezionare l'ultima scheda, qualche idea su come farlo? Solo le schede all'interno di ng-repeat sono disponibili per la selezione, non userò una ng-repeat, come posso farlo senza ng-repeat?Come selezionare una scheda in angular-ui? (AngularJS)

Ecco il codice di lavoro: 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>

fonte

2016-01-04 lito

Non stai aggiungendo che scheda per il 'tabs' collection..Should essere aggiunto? O dovrebbe essere separato? –

Ciao! Mi piace separarlo. Non voglio usare una ripetizione, grazie! – lito

Tutto quello che ho fatto è stato inizializzare un nuovo oggetto per contenere la nuova scheda, e cambiare il vostro riferimento nel pulsante. Risolve il tuo problema ma non ho idea se sia la tua architettura desiderata.

Ecco i punti salienti:

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

Ecco il plnkr

fonte

2016-01-04 20:51:53

sì, grazie! Questo farà il lavoro, stavo cercando di usare il modello NG ma sembra che sia più facile di così. Pensi che ci sia un modo per evitare di creare un oggetto "$ scope.separateTab = {};" nel controller? – lito

Come dovrebbe essere guidato? Stiamo superando lo scopo della domanda, ma non ho idea di come stai caricando i tuoi dati. 'tabs' può essere un oggetto con matrici di diverse schede. Ma non ho idea di come rispondere alla tua domanda senza ulteriori informazioni. –

Ecco il mio codice in caso qualcuno bisogno di qualche altro esempio:

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>

fonte

2016-01-04 21:17:22 lito

Un modo per raggiungere è impostare l'attributo attivo di UIB-scheda, qualcosa di simile:

<uib-tabset active="activeForm">

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

fonte

2016-12-13 09:54:56

Come selezionare una scheda in angular-ui? (AngularJS)

risposta

Problemi correlati