Angular Material md-tabs启用所有选项卡切换到第一个选项卡



md-tabs的默认行为在禁用所有选项卡时切换到最后一个选项卡,在启用所有选项卡时切换回第一个选项卡。

http://codepen.io/anon/pen/dpKPrQ

<md-content class="md-padding">
<md-tabs md-selected="selectedIndex" md-border-bottom="" md-autoselect="">
  <md-tab ng-repeat="tab in tabs" ng-disabled="disabled" label="{{tab.title}}">
    <div class="demo-tab tab{{$index%4}}" style="padding: 25px; text-align: center;">
      <div ng-bind="tab.content"></div>
      <br>
    </div>
  </md-tab>
</md-tabs>
<md-button class="md-primary md-raised" ng-click="disabled = !disabled" ng-disabled="tabs.length <= 1">Disable/Enable</md-button>

这两个我都不要。我怎样才能改变这一点?

谢谢

这个怎么样:

$watch the selectedIndex .

var justDisabled = false;
$scope.disableTabs = function() {
  $scope.disabled = !$scope.disabled;
  justDisabled = true;
}
$scope.$watch('selectedIndex', function(newValue, oldValue) {
  if(justDisabled) {
    $scope.selectedIndex = oldValue;
    justDisabled = false;
  }
});

和标记

<md-button class="md-primary md-raised" ng-click="disableTabs()" ng-disabled="tabs.length <= 1">Disable/Enable</md-button>

现在你拥有了绝对的权力(而且这一切都在一个摘要中完成)!

http://codepen.io/astynax777/pen/NRzPEp

保持在同一选项卡上- CodePen

标记
<md-button class="md-primary md-raised" ng-click="toggle()" ng-disabled="tabs.length <= 1">Disable/Enable</md-

JS

var currentSelection = $scope.selectedIndex;
var mySelection = 5;
$scope.toggle = function () {
    $scope.disabled = !$scope.disabled;
    $timeout(function () {
        $scope.selectedIndex = currentSelection;
        /* Or choose a selection
        $scope.selectedIndex = mySelection;
        */
    });
}

最新更新