在角度材料中使用制表符时如何自动触发prev和下一个按钮

时间:2015-06-19 15:06:13

标签: javascript angular-material

如何在调整窗口大小时自动触发上一个和下一个按钮?这是我的HTML

<div ng-app="anApp" ng-controller="mainCtrl" class="tabsdemoDynamicTabs" layout="column" ng-app="MyApp">
    <md-content class="md-padding">
        <md-tabs md-selected="selectedIndex" md-border-bottom="" md-autoselect="">
            <md-tab ng-repeat="tab in tabs" ng-disabled="tab.disabled" label="@{{tab.title}}">
                <div class="demo-tab tab@{{$index%4}}" style="padding: 25px; text-align: center;">
                    <div ng-bind="tab.content"></div>
                </div>
            </md-tab>
        </md-tabs>
    </md-content>
</div>

这里是javascript

    'use strict';       
    var tabs = [
          { title: 'One', content: "Tabs will become paginated if there isn't enough room for them."},
          { title: 'Two', content: "You can swipe left and right on a mobile device to change tabs."},
          { title: 'Three', content: "You can bind the selected tab via the selected attribute on the md-tabs element."},
          { title: 'Four', content: "If you set the selected tab binding to -1, it will leave no tab selected."},
          { title: 'Five', content: "If you remove a tab, it will try to select a new one."},
          { title: 'Six', content: "There's an ink bar that follows the selected tab, you can turn it off if you want."},
          { title: 'Seven', content: "If you set ng-disabled on a tab, it becomes unselectable. If the currently selected tab becomes disabled, it will try to select the next tab."},
          { title: 'Eight', content: "If you look at the source, you're using tabs to look at a demo for tabs. Recursion!"},
          { title: 'Nine', content: "If you set md-theme=\"green\" on the md-tabs element, you'll get green tabs."},
          { title: 'Ten', content: "If you're still reading this, you should just go check out the API docs for tabs!"}
        ],
        selected = null,
        previous = null;
    $scope.tabs = tabs;
    $scope.selectedIndex = 2;
    $scope.$watch('selectedIndex', function(current, old){
      previous = selected;
      selected = tabs[current];
      if ( old + 1 && (old != current)) $log.debug('Goodbye ' + previous.title + '!');
      if ( current + 1 )                $log.debug('Hello ' + selected.title + '!');
    });

如果可能的话,我想最小化自定义js和css。

2 个答案:

答案 0 :(得分:0)

您使用的是什么版本的Angular材料?这应该在最新版本(0.10.0)中调整大小时自动发生。

答案 1 :(得分:0)

不确定您是否仍需要答案,但对于花费数小时的其他人可以使用以下内容。

恢复角度1.3.15适用于角度材料0.10.0。角1.4.3似乎有问题。问题是md-prev-button和md-next-button没有被渲染。