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>

正如您所看到的，md-tabs'内容通过ng-repeat填充，而有一个md-tab始终存在。它完美地实现了向控件添加新选项卡的目的。

还有另一个控件，每个md-tab-body（removeTabs）内的按钮会删除当前选中的标签。虽然这种方法很好，但却有一个不足之处。每次删除选项卡时，选项卡选择会自动跳转到最后一个选项卡，该选项卡始终为addTab - 控件。这不是我想要的！所以我尝试了另一种方法。

通过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 - Control可能具有一些针对此类要求的本机功能。如果有，我找不到它。也许使用自定义md-next - 控制？
使用md-button时，可以使用css解决此问题。如果这是正确的，我不知道如何解决这个问题。正如我之前提到的，我想知道这是否是一种合理的方法。

如果要对我的代码进行全面检查，请访问我的Fiddle。

Answer 1

您可以使用tab属性选择所需的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上的工作示例。

Answer 2

此方法与您的方法相同，删除按钮将位于每个标签中，添加新标签按钮位于md-tabs范围之外且位于页面底部。

Try this example in code pen

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

向md-tabs

2 个答案: