custom tabs with ng-repeat not working

Question

this working perfect when without ng-repeat add to it

<ul>          
    <li ng-class="{active:tab===1}"> 
      <a href ng-click="tab = tab==1 ? a : 1">Tab1</a>               
    </li>           
    <li ng-class="{active:tab===2}"> 
       <a href ng-click="tab = tab==2 ? a : 2">Tab2</a>              
    </li>           
    <li ng-class="{active:tab===3}"> 
      <a href ng-click="tab = tab==3 ? a : 3">Tab3</a>           
    </li>     
       </ul>      
    <br><br> 
    <p ng-show="tab === 1"> Tab1 content </p>           
    <p ng-show="tab === 2"> Tab2 content</p> 
    <p ng-show="tab === 3"> Tab3 content</p>

add np-repeat only in content, not tab,this working perfect too

   <ul>          
    <li ng-class="{active:tab===1}"> 
      <a href ng-click="tab = tab==1 ? a : 1">Tab1</a>               
    </li>           
    <li ng-class="{active:tab===2}"> 
       <a href ng-click="tab = tab==2 ? a : 2">Tab2</a>              
    </li>           
    <li ng-class="{active:tab===3}"> 
      <a href ng-click="tab = tab==3 ? a : 3">Tab3</a>           
    </li>     
       </ul>      
    <br><br> 
    <p ng-show="tab === {{$index}}" ng-repeat="data in data">
       <a ng-repeat="value in data.value">{{value.name}}</a>
    </p>

here is the code i add the ng-repeat to tabs and content, not working

<ul>          
    <li ng-repeat="data in data" ng-class="{active:tab==={{$index}}}"> 
      <a href ng-click="tab = tab=={{$index}} ? a : {{$index}} ">Tab1</a>               
    </li>                      
     </ul>
    <br><br> 
    <p ng-show="tab === {{$index}}" ng-repeat="data in data">
       <a ng-repeat="value in data.value">{{value.name}}</a>
    </p>

that's doesn't make sense, i follow the logical to write the code, didn't know why it's not working, can anyone help plz

score 1 · Accepted Answer · edited May 23 '17 at 11:43

Do not use interpolations {{}} inside the expression, ng-class/ng-show takes an angular expression so try:

   <li ng-repeat="data in data" ng-class="{active:tab===$index}"> 
      <a href ng-click="tab = (tab== $index ? a : $index)">Tab1</a>               
    </li>                      
     </ul>
    <br><br> 
    <p ng-show="tab === $index" ng-repeat="data in data">
       <a ng-repeat="value in data.value">{{value.name}}</a>
    </p>

Also note that $index is zero based, i.e it starts from 0 not 1. Another thing to note that ng-repeat creates child scope so be aware of the nuances of child scope inheritance.

So

In your controller:

//initialize:-
$scope.tab = {selected :0}

and

$scope.setTab = function(index){
     $scope.tab.selected = index;
}

$scope.isSelected = function(index){
   return $scope.tab.selected === index;
}

and

    <li ng-repeat="data in data" ng-class="{active: isSelected($index)}"> 
      <a href ng-click="setTab($index)">Tab1</a>               
    </li>                      
     </ul>
    <br><br> 
    <p ng-show="isSelected($index)" ng-repeat="data in data">
       <a ng-repeat="value in data.value">{{value.name}}</a>
    </p>

custom tabs with ng-repeat not working

1 Answers1