javascript - 向 md-tabs 添加 'Add/Remove-Tab' 功能

Question

我的目标是向我的 md-tabs 控件添加功能，该控件将添加或删除选项卡。我可以通过将功能添加到例如按钮。

问题是要求说这个功能应该位于 md-tabs 控件本身(而不是 md-tab-body!)。

所以我尝试了两种不同的方法:

1. 添加硬编码的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) 用于删除当前选定的选项卡。虽然这种方法效果很好，但它有一个缺点。每次移除选项卡时，选项卡选择会自动跳转到最后一个选项卡，它始终是 addTab-Control。这不是我想要的!所以我尝试了另一种方法。

1. 通过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 功能。

所以我这里的总体问题是如何解决这个问题。我在这里看到两个潜在的解决方案。

1. md-tabs-Control 可能具有满足此类要求的某些 native 功能。如果有，我找不到它。也许使用自定义 md-next-Control？
2. 当使用 md-button 时，这个问题可以使用 css 来解决。如果这是正确的，我不确定如何处理这个任务。另外正如我之前提到的，我想知道这是否是一种合理的方法。

有关我的代码的完整示例，请参阅我的 Fiddle .

Answer 1

您可以使用md-selected 属性选择所需的选项卡。只需定义所需页面的索引，同时删除 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 的工作示例.