Javascript 添加一个'；添加/删除选项卡'；md选项卡的功能

我的目标是为我的

md选项卡

控件添加功能，该控件将添加或删除选项卡。我可以通过添加功能（例如按钮）轻松实现这一点

问题在于，要求说明此功能应该位于

md选项卡

控件本身内（而不是

md选项卡主体

！）

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

添加硬编码的

md选项卡

<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选项卡中的按钮。如果我添加了足够多的标签，它们就会被添加到按钮下面，就好像它不在那里一样


当我在想我可以使用一些css解决这个问题时，有人告诉我（在JavaScript聊天中）不要乱动
md选项卡
功能


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

md选项卡
-控件可能具有一些针对此类需求的本机功能。如果有，我就找不到了。可能使用自定义的
md next
-控件
当使用
md按钮时
这个问题可以通过css解决。如果这是正确的，我不知道如何处理这项任务。正如我之前提到的，我想知道这是否是一个合理的方法
有关我的代码的完整示例，请参考我的。
此方法与您的方法相同，删除按钮将位于每个选项卡中，添加新选项卡按钮位于md tabs范围之外和页面底部

Try this example in code pen

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

您可以使用
md selected
属性选择所需的
选项卡。只需定义所需页面的索引，同时删除
选项卡

这是代码

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>


{{status.name}
{{status.description}}
删除选项卡{{selectedTab}
+添加选项卡

这是上的工作示例。
如我上面所述，按钮必须嵌套在md tabs控件中，因此在删除当前的
选项卡后，是否要转到其他特定选项卡？@nextt1这是正确的。
<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>