AngularJS中使用ng-repeat遍历数组对象时如何设置各分组默认最后标签页

核心问题 #

1. 你使用了全局唯一的$scope.selecttab存储选中状态，所有tab分组共享这一个变量，导致所有分组都展示同一个选中内容。你的循环遍历结束后selecttab最终赋值为最后一组的最后一项{"id": 8, "status": 1}，所以所有分组默认都显示这个内容。
2. 初始化逻辑错误，遍历所有tab项重复覆盖selecttab，没有针对每个分组单独设置最后一项为默认选中值。

修复代码 #

JS代码 #

需要给每个tab分组单独绑定选中状态，初始化时直接取每个分组tab数组的最后一项作为默认选中：

// 初始化每个分组的默认选中tab
for(let i = 0; i < $scope.data.length; i++) {
  const currentGroup = $scope.data[i];
  // 取当前分组tab数组的最后一项作为默认选中
  currentGroup.selected = currentGroup.tab[currentGroup.tab.length - 1];
}
// 切换tab方法，传入当前分组和选中的tab
$scope.getTab = function(group, tab) {
  group.selected = tab;
};

HTML代码 #

修改选中判断、点击事件、内容渲染的关联变量，绑定到当前分组自身的选中状态：

<div ng-repeat="obj in data">
  <ul class="nav nav-tabs">
    <li ng-class="{ active: obj.selected == obj1 }" ng-repeat="obj1 in obj.tab track by $index">
      <a href ng-click="getTab(obj, obj1)">{{ $index }}</a>
    </li>
  </ul>
  <div class="tab-content" ng-repeat="obj1 in obj.selected">
    ID: {{obj1.id}}<br>
    Status : {{obj1.status}}
  </div>
</div>

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