md-tabに「Add/Remove-Tab」機能を追加する

Question

私の目標は、タブを追加または削除する私の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> 

追加

1. ：

   は、だから私は2つの異なるアプローチを試してみました'のコンテンツにはng-repeatが入力され、一方には常にmd-tabが存在します。これは、コントロールに新しいタブを追加するという目的を完全に果たします。

   別のコントロールがあります。md-tab-body（removeTabs）内のボタンで、現在選択されているタブを削除します。このアプローチはうまくいきますが、それには一つの欠点があります。タブが削除されるたびに、タブ選択は自動的に最後のタブにジャンプします。これは常にaddTab -Controlです。これは私が望むものではありません！そこで別のアプローチを試みました。このアプローチはまた、その目的を果たすないが

2. 追加タブを介し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を使用してこの問題を解決する可能性が考えていた間、私はmd-tabs機能で周りのネジしない（JavaScriptのチャットに）言われました。



だからここに私の全体的な質問は、この問題を解決する方法です。ここには2つの潜在的な解決策があります。

1. md-tabs -Controlには、このような要件のネイティブ機能がある場合があります。それがあれば、私はそれを見つけることができませんでした。おそらくカスタムを使用していますmd-next -Control？
2. md-buttonを使用する場合、この問題はcssを使用して解決できる場合があります。これが正しければ、私はこの作業にどのように取り組むべきか分かりません。また、前にも触れましたが、これが合理的なアプローチであるかどうかは疑問です。

私のコードの完全な審査は、Fiddleにしてください。

Answer 1

あなたは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の実施例です。

Answer 2

この方法はあなたのものと同じです。削除ボタンは各タブにあり、新しいタブボタンを追加することはmd-tabsの範囲外で、ページの一番下にあります。

Try this example in code pen 

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