[英]how to autotrigger prev and next button when using tabs in 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。
您正在使用哪個版本的Angular Material? 在最新版本(0.10.0)中調整大小時應自動發生這種情況。
不知道您是否仍然需要答案,但是對於花了幾個小時的其他人可以使用以下方法。
恢復到角度1.3.15可以使用角度材料0.10.0。 角度1.4.3似乎有問題。 問題是md-prev-button和md-next-button未被渲染。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.