如何解决ng-click结合ng-repeat多次切换UI Bootstrap Tab失效问题？

我之前也踩过类似Angular UI Tab切换的坑，结合你提供的代码和问题描述，大概率是Tab结构错误和Index冲突导致的，下面给你一步步分析和解决：

1. 先修复错误的Tab嵌套结构 #

你代码里的uib-tab嵌套写法是核心问题之一！uib-tab必须是uib-tabset的直接子元素，绝对不能嵌套在另一个uib-tab内部。原代码里把动态生成的uib-tab放在Overview Tab里面，会让Tab的索引逻辑完全混乱，Angular根本无法正确识别要切换的目标Tab。

正确的结构应该是这样：

<uib-tabset active="activeForm">
  <!-- 单独的Overview Tab，手动设置index为0 -->
  <uib-tab index="0" heading="Overview">
    <rd-widget-body style="cursor:pointer;user-select: none;" ng-click="setTab(0)">
      <!-- 这里放Overview的内容 -->
    </rd-widget-body>
  </uib-tab>

  <!-- 动态遍历生成的Tabs，index从1开始避免和Overview冲突 -->
  <uib-tab 
    ng-repeat="x in data | ragFilter" 
    index="$index + 1" 
    heading="{{x.heading}}"> <!-- 替换成你数据里实际的表头字段 -->
    <div style="user-select: none; padding:0;" ng-click="setTab($index + 1)">
      <!-- 这里放每个动态Tab的内容 -->
    </div>
  </uib-tab>
</uib-tabset>

2. 不要把ng-click绑定在uib-tab标签上 #

uib-tab组件本身自带点击切换的逻辑，你把自定义的ng-click直接绑在uib-tab上，会和内置的点击事件产生冲突——首次点击可能因为初始状态没触发内置逻辑而生效，但后续点击时内置逻辑和自定义逻辑互相干扰，导致切换失效。

正确的做法是把ng-click绑定在Tab内部的内容元素上（比如div、rd-widget-body这些），而不是uib-tab本身。

3. 用稳定的唯一标识代替$index作为Tab的index #

如果你的ragFilter会过滤数据，导致ng-repeat的$index不稳定（比如数据顺序变化、数量增减），那么用$index作为Tab的index会导致切换目标混乱。建议用数据里的唯一字段（比如每条数据的ID）作为index：

<uib-tab 
  ng-repeat="x in data | ragFilter" 
  index="{{x.id}}" 
  heading="{{x.heading}}">
  <div ng-click="setTab(x.id)">
    <!-- Tab内容 -->
  </div>
</uib-tab>

控制器里对应的setTab函数要注意类型匹配（因为index="{{x.id}}"是字符串类型）：

$scope.setTab = function (newTab) {
  $scope.activeForm = newTab.toString(); // 确保和Tab的index类型一致
  console.log('尝试切换到Tab:', newTab); // 保留控制台输出确认触发
}

4. 初始化activeForm的值 #

记得在控制器里初始化$scope.activeForm = 0;（对应Overview Tab的index），避免初始值为undefined导致的切换异常。

按照上面的步骤调整后，应该就能解决首次点击有效、后续无法切换的问题了。另外你提到另一页面相同代码正常，大概率是那个页面的Tab结构没有嵌套错误，或者数据过滤后$index没有变化，所以没触发这个问题。

内容的提问来源于stack exchange，提问作者Munerz