CODEWITHSUNDEEP
angularjsangular-material
Durga
Durga

Reputation: 15604

md-selected not working properly in md-tab

var app = angular.module('tabsDemo', ['ngMaterial']);
app.controller('TabsController',tabsController);
function tabsController($scope){
    $scope.showBack = false;
    //$scope.selectedIndex = 3;
    $scope.tabs = [1,2,3,4,5,6];
    $scope.changeTabs = function(){
      $scope.showBack = true;
      $scope.tabs = ['a','b'];
    }
    $scope.goHome = function(){
      $scope.showBack = false;
      $scope.tabs = [1,2,3,4,5,6];
      $scope.selectedIndex = 3;
    }
}
<link href="https://rawgit.com/angular/bower-material/master/angular-material.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.js"></script>
<script src="https://rawgit.com/angular/bower-material/master/angular-material.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-aria.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
      
<div ng-app="tabsDemo" ng-controller="TabsController">

  <md-button ng-show = "showBack" ng-click = "goHome()">
   <i class="material-icons">keyboard_backspace</i>
  </md-button>
  
  <md-tabs md-selected="selectedIndex" md-stretch-tabs>
    <md-tab ng-repeat="tab in tabs" label="{{tab}}">
      <div style="text-align: center;">
      
         <button ng-bind="tab" ng-click="changeTabs()"></button>
            
      </div>
    </md-tab>
  </md-tabs>
</div>

If I assign selectedIndex value directly from controller it is working(changing the tab). If I assign this value from inside a function it is not affecting to the tabs and it setting tab index to zero.

Upvotes: 3

Views: 3331

Answers (1)

Gaurav Srivastava
Gaurav Srivastava

Reputation: 3232

You can use timeout to reflect the changes in selectedIndex:

var app = angular.module('tabsDemo', ['ngMaterial']);
app.controller('TabsController',tabsController);
function tabsController($scope,$timeout){
    $scope.showBack = false;
    
    $scope.ctrl = {};
     $scope.ctrl.selectedIndex = 3;
    $scope.tabs = [1,2,3,4,5,6];
    $scope.changeTabs = function(){
      $scope.showBack = true;
      $scope.tabs = ['a','b'];
    }
    $scope.goHome = function(){
      $scope.showBack = false;
      $scope.tabs = [1,2,3,4,5,6];
       $timeout(function () {
           $scope.ctrl.selectedIndex = 3;
       });
     
    }
    
}
<link href="https://rawgit.com/angular/bower-material/master/angular-material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.js"></script>
<script src="https://rawgit.com/angular/bower-material/master/angular-material.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-aria.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<div ng-app="tabsDemo" ng-controller="TabsController">

  <md-button ng-show="showBack" ng-click="goHome()">
    <i class="material-icons">keyboard_backspace</i>
  </md-button>

  <md-tabs md-selected="ctrl.selectedIndex" md-stretch-tabs ng-disabled="tabs.length <= 1">
    <md-tab ng-repeat="tab in tabs" label="{{tab}}">
      <div style="text-align: center;">

        <button ng-click="changeTabs()">Change Tab</button>

      </div>
    </md-tab>
  </md-tabs>
</div>

Upvotes: 5

Related Questions