javascript - 带有 ng-repeat 的自定义选项卡不起作用

Question

当没有 ng-repeat 添加时，这个工作完美

<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>        

仅在内容中添加 np-repeat，而不是在选项卡中，这也很完美

   <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>                   

这是我将 ng-repeat 添加到选项卡和内容的代码，但不起作用

<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>                   

这没有意义，我按照逻辑编写代码，不知道为什么它不起作用，有人可以帮忙吗

Answer 1

不要在表达式内使用插值{{}}，ng-class/ng-show 采用 Angular 表达式，因此请尝试:

   <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>   

另请注意，$index 是从零开始的，即它从 0 而不是 1 开始。另一件事需要注意的是 ng-repeat 创建子作用域，因此 be aware of the nuances of child scope inheritance 。

所以

在你的 Controller 中:

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

和

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

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

和

    <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>