向md-tabs添加「添加/刪除選項卡」功能

我的目標是添加功能到我的md-tabs控件，該控件將添加或刪除選項卡。我可以通過添加功能來輕鬆實現這一點。鈕釦。向md-tabs添加「添加/刪除選項卡」功能

問題是要求說這個功能應該在md-tabs控制器本身（不是md-tab-body！）。

所以我嘗試了兩種不同的方法：

添加一個硬編碼md-tab

<md-tab ng-repeat="status in statuses"> 
    <md-tab-label> 
    {{status.name}} 
    <md-tooltip md-direction="bottom"> 
     {{status.description}} 
    </md-tooltip> 
    </md-tab-label> 
    <md-tab-body> 
    <md-button ng-click="removeTab(status)">Remove Tab</md-button> 
    </md-tab-body> 
</md-tab> 

<md-tab ng-click="addTab()"> 
    <md-tab-label> + Add Tab</md-tab-label> 
     <md-tab-body>  
    </md-tab-body> 
</md-tab>

正如你可以看到md-tabs'的內容通過ng-repeat填充，而有一個md-tab始終存在。它完美實現了向控件添加新選項卡的目的。

還有另一個控件，每個md-tab-body（removeTabs）中的一個按鈕將刪除當前選定的選項卡。雖然這種方法工作正常，但它有一個缺點。每次選項卡被刪除時，選項卡會自動跳轉到最後一個選項卡，該選項卡始終是控制檯。這不是我想要的！所以我嘗試了另一種方法。

經由

添加突出部md-button

<md-tab ng-repeat="status in statuses"> 
    <md-tab-label> 
    {{status.name}} 
    <md-tooltip md-direction="bottom"> 
     {{status.description}} 
    </md-tooltip> 
    </md-tab-label> 
    <md-tab-body> 
    <md-button ng-click="removeTab(status)">Remove Tab</md-button> 
    </md-tab-body> 
</md-tab> 

<md-button ng-click="addTab()"> + Add Tab</md-button>

雖然這種方法還沒有完成其目的，還配備了一個壞處。即，在添加更多選項卡時，控件將忽略md-tabs中的按鈕。如果我添加了足夠多的選項卡，它們只是添加到按鈕下方，就好像它不在那裏一樣。

雖然我想我可以使用一些CSS解決這個問題，有人告訴我（在JavaScript聊天）不是耍着md-tabs功能。

所以我在這裏總的問題是如何解決這個問題。我在這裏看到兩個可能的解

md-tabs控制可能有一些本地功能的這種要求。如果有的話，我找不到它。也許使用自定義md-next控制？
使用md-button時，可以使用css解決此問題。如果這是正確的，我不知道如何解決這個任務。正如我之前提到的，我想知道這是否合理。

對於我的代碼的完整檢查，請參閱我的Fiddle。

來源

2017-02-20 indexoutofbounds

所以在刪除當前'tab'後，你想要去其他特定的選項卡？ – nextt1

@ nextt1這是正確的。 – indexoutofbounds

您可以通過使用md-selected屬性選擇所需tab。只需在刪除tab時定義所需頁面的索引。

這是代碼。

angular.module('MyApp', ['ngMaterial']) 
.controller('MyCtrl', function ($scope) { 
$scope.statuses = [ 
    {id: 1, name: "One", description: "First Tooltip"}, 
    {id: 2, name: "Two", description: "Second Tooltip"}, 
    {id: 3, name: "Three", description: "Third Tooltip"}, 
]; 
$scope.selectedTab = 0; //Initial Page 

$scope.addTab = function(){ 
    $scope.statuses.push({id: $scope.statuses.length + 1, name: $scope.statuses.length + 1, description: "New Tooltip"}); 
} 
$scope.removeTab = function(status){ 
alert(status.id); 
$scope.selectedTab = 0; //new line added 
var index = $scope.statuses.indexOf(status); 
$scope.statuses.splice(index,1); 
} 
});

HTML代碼

<md-content class="md-padding"> 
<md-tabs class="" md-selected="selectedTab" md-align-tabs="top" md-border-bottom md-autoselect md-dynamic-height> 

    <md-tab ng-repeat="status in statuses"> 
    <md-tab-label> 
    {{status.name}} 
    <md-tooltip md-direction="bottom"> 
     {{status.description}} 
    </md-tooltip> 
    </md-tab-label> 
    <md-tab-body> 
    <md-button ng-click="removeTab(status)">Remove Tab {{selectedTab}}</md-button> 
    </md-tab-body> 
</md-tab> 

    <md-button style="right: 0;position: absolute;z-index: auto" ng-click="addTab()"> + Add Tab</md-button> 
</md-tabs> 
</md-content>

這裏是jsfiddle工作的例子。

來源

2017-02-20 17:37:36 nextt1

此方法與您的方法相同，刪除按鈕將位於每個選項卡中，並且添加新選項卡按鈕位於md-tabs範圍之外並位於頁面底部。

Try this example in code pen 

http://codepen.io/imraqes/pen/jyjKQB

來源

2017-02-20 11:33:00 Rakeschand

就像我上面提到的那樣，按鈕必須嵌套在md-tabs-Control – indexoutofbounds

向md-tabs添加「添加/刪除選項卡」功能

回答

相關問題