angular / material

Material design for AngularJS
https://material.angularjs.org/
MIT License
16.55k stars 3.39k forks source link

Angular material MD-TAB not working when i swipe and click on it , #8583

Closed bhandaribhumin closed 8 years ago

bhandaribhumin commented 8 years ago

swipe working good before i click on tab after click on tab it will not work , i dont know how it works but please help me how i work on tab swipe with click work proper with dynamic tab and tab content data. i'll send sample video it's shows when i swipe tab left and right it will work but if i click on tab swipe not works

Video file :

https://drive.google.com/open?id=0B0qdA1kUoM_haGV0ZHAxYzViWkk

my controller.js is $scope.selectedIndex = 0; $scope.onSwipeLeft = function(){

if($scope.selectedIndex < $scope.categoryList.length){

$scope.selectedIndex = $scope.selectedIndex + 1; //alert($scope.selectedIndex); }

}; $scope.ClickTab = function(){ alert($scope.selectedIndex+1);

};

$scope.onSwipeRight = function(){ //alert($scope.selectedIndex); if($scope.selectedIndex != 0) { $scope.selectedIndex = $scope.selectedIndex - 1; } }

------------and html is

```

{{you.category_name}}

{{you.deal_in_category}}

{{you.category_name}}

{{you.deal_in_category}}

graphefruit commented 8 years ago

@bhandaribhumin Please layout your CSS/JS better, its realy hard to read. The solution looks like: HTML:

<md-content class="flex">
    <md-tabs md-selected="tabs.selectedIndex">
        <md-tab label="Tab1">
            <md-content md-swipe-left="tabs.next()" md-swipe-right="tabs.previous()">Tab1 - Content</md-content>
        </md-tab>
        <md-tab label="Tab2">
            <md-content md-swipe-left="tabs.next()" md-swipe-right="tabs.previous()">Tab2 - Content</md-content>
        </md-tab>
    </md-tabs>
</md-content>

JS:

$scope.tabs = {
        selectedIndex: 0,
        next: function () {
            $scope.tabs.selectedIndex = Math.min($scope.tabs.selectedIndex + 1, 1);
        },
        previous: function () {
            $scope.tabs.selectedIndex = Math.max($scope.tabs.selectedIndex - 1, 0);
        }
    };
ThomasBurleson commented 8 years ago

This issue is closed as part of our ‘Surge Focus on Material 2' efforts. For details, see our forum posting @ http://bit.ly/1UhZyWs.