javascript - how to autotrigger prev and next button when using tabs in angular material -
how automatically trigger prev , next button when window resized? here 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>
and here javascript
'use strict'; var tabs = [ { title: 'one', content: "tabs become paginated if there isn't enough room them."}, { title: 'two', content: "you can swipe left , right on mobile device change tabs."}, { title: 'three', content: "you can bind selected tab via selected attribute on md-tabs element."}, { title: 'four', content: "if set selected tab binding -1, leave no tab selected."}, { title: 'five', content: "if remove tab, try select new one."}, { title: 'six', content: "there's ink bar follows selected tab, can turn off if want."}, { title: 'seven', content: "if set ng-disabled on tab, becomes unselectable. if selected tab becomes disabled, try select next tab."}, { title: 'eight', content: "if @ source, you're using tabs @ demo tabs. recursion!"}, { title: 'nine', content: "if set md-theme=\"green\" on md-tabs element, you'll green tabs."}, { title: 'ten', content: "if you're still reading this, should go check out api docs 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 + '!'); });
if possible, want minimise custom js , css.
what version of angular material using? should happen automatically on resize in latest version (0.10.0).
Comments
Post a Comment