Registerkarte mit aktivem und ng-repeat in uib-tab hinzufügen

Also habe ich versucht, dies für eine Weile herauszufinden, und ich sehe einen ähnlichen Beitrag, aber unbeantwortet, also werde ich versuchen, dies zu veröffentlichen, aber mit einem Plunkr als ein Beispiel zu zeigen.Registerkarte mit aktivem und ng-repeat in uib-tab hinzufügen

Also das Problem ist, dass beim Laden, stelle ich fest, dass die UI-Registerkarte immer auf die Schaltfläche Tab hinzufügen gesetzt ist. Ich möchte, dass das erste Element in ui-tab ng-repeat aktiv ist und nicht die statische Schaltfläche "Add Tab".

<uib-tabset active="activeTabIndex"> <uib-tab ng-repeat="tab in tabs" heading="{{tab.title}}">Some content</uib-tab> <uib-tab heading="Add a tab" ng-click="addTab()" >Add a tab</uib-tab> </uib-tabset>

https://plnkr.co/edit/XrYSKLdyN1cegfcdjmkz?p=preview

Wie kann ich das erreichen? Ich war schon eine Weile dabei, habe aber immer noch keine Ahnung, wie ich das lösen könnte.

Danke,

Quelle

2016-05-22 Julius Doan

Was aktive Mittel nicht sein? –

Wie in show auf ui-tabset. Der aktive Index * der ng-Wiederholung. Also das erste Element in ng-repeat und nicht die statische Schaltfläche zum Hinzufügen von Schaltflächen, die beim Starten beim Plunkr angezeigt werden. –

Sie haben einige Whdd Dinge gehen dort –

Erraten Sie diesefixed plunker mögen,

Ein wenig knifflig von erstellen Sie Ihre eigenen directive anstatt <uib-tab> einen zusätzlichen nutzen dort zu erreichen.

Beispielcode:

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

 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script> 
 
    <script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.2.4.js"></script> 
 
    <script type="text/javascript"> 
 
    angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']); 
 
    angular.module('ui.bootstrap.demo').controller('TabsDemoCtrl', function($scope, $window, $timeout) { 
 

 
     $scope.tabs = [{ 
 
     title: 'Tab1', 
 
     content: 'content1' 
 
     }, { 
 
     title: 'Tab2', 
 
     content: 'content2' 
 
     }]; 
 
     $scope.activeTabIndex = 0;//$scope.tabs.length - 1; 
 

 
     $scope.addTab = function() { 
 
     var newTab = { 
 
      title: 'Tab ' + ($scope.tabs.length + 1), 
 
      content: 'content ' + ($scope.tabs.length + 1) 
 
     }; 
 
     $scope.tabs.push(newTab); 
 
     $timeout(function() { 
 
      $scope.activeTabIndex = ($scope.tabs.length - 1); 
 
     }); 
 
     console.log($scope.activeTabIndex); 
 
     }; 
 
    }); 
 
    angular.module('ui.bootstrap.demo').directive('uibTabButton', function() { 
 
     return { 
 
     restrict: 'EA', 
 
     scope: { 
 
      handler: '&', 
 
      text:'@' 
 
     }, 
 
     template: '<li class="uib-tab nav-item">' + 
 
      '<a href="javascript:;" ng-click="handler()" class="nav-link" ng-bind="text"></a>' + 
 
      '</li>', 
 
     replace: true 
 
     } 
 
    }); 
 
    </script> 
 
    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 
 
</head> 
 

 
<body> 
 
    <div ng-controller="TabsDemoCtrl"> 
 

 
    Active index: {{ activeTabIndex }} 
 
    <br /> Tab count: {{ tabs.length }} 
 
    <br /> 
 

 
    <input type="button" value="Add Tab" ng-click="addTab()" /> 
 

 
    <uib-tabset active="activeTabIndex"> 
 
     <uib-tab active="activeTabIndex==$index" ng-repeat="tab in tabs" heading="{{tab.title}}">{{tab.content}}</uib-tab> 
 
     <uib-tab-button handler="addTab()" text="Add a tab"></uib-tab-button> 
 
    </uib-tabset> 
 
    </div> 
 
</body> 
 

 
</html>

Quelle

2016-05-22 04:05:53

Oh Wow hätte ich nie gedacht, nur eine andere Richtlinie zu erstellen. Vielen Dank! –

Registerkarte mit aktivem und ng-repeat in uib-tab hinzufügen

Antwort

Verwandte Themen