嵌套ng-repeat获取展示数据时的标签覆盖问题求助

嘿，我太懂你这个头疼的问题了——两层ng-repeat嵌套时，所有问题的标签居然被同一个覆盖，这种情况我之前帮好几个开发者排查过，大概率是作用域共享或者异步请求的引用问题在搞鬼，咱们一步步拆解解决：

最常见的元凶：共享了同一个引用类型变量 #

你大概率是在控制器里定义了一个全局的标签数组（比如$scope.tags），然后循环请求每个问题的标签时，都往这个全局数组里赋值。因为数组是引用类型，所有内层ng-repeat都会绑定同一个数组，最后一个请求返回的结果自然就覆盖了之前所有的标签。

解决办法：给每个问题绑定专属的标签数组

拿到问题列表后，先给每个问题对象初始化一个tags属性，请求标签时直接把结果赋值给这个专属属性，而不是全局变量：

// 假设从后端获取问题列表
$scope.questions = [];

$http.get('/api/questions').then(function(res) {
  $scope.questions = res.data;
  // 给每个问题初始化专属的tags数组
  $scope.questions.forEach(function(question) {
    question.tags = [];
    // 请求当前问题的标签，直接赋值给question.tags
    $http.get(`/api/questions/${question.id}/tags`).then(function(tagRes) {
      question.tags = tagRes.data;
    });
  });
});

对应的HTML模板也要改成绑定每个问题自己的tags：

<div ng-repeat="question in questions track by question.id">
  <h3>{{question.title}}</h3>
  <!-- 内层循环绑定当前问题的专属tags -->
  <div ng-repeat="tag in question.tags track by tag.id">
    <span class="tag">{{tag.name}}</span>
  </div>
</div>

额外排查点：异步请求的时序问题 #

如果你的标签请求没有和具体问题绑定，比如循环时每次都把结果赋值给同一个全局变量，而请求返回的顺序不一定和问题顺序一致，最后返回的请求就会覆盖所有之前的结果。上面的专属标签数组方案已经能解决这个问题，因为每个请求的结果都只属于对应问题。

小技巧：加上track by避免DOM复用混乱 #

虽然不是直接原因，但如果问题或标签的ID重复，Angular的ng-repeat可能会复用DOM元素导致显示错乱。给两层循环都加上track by，让Angular能精准识别每个项：

<div ng-repeat="question in questions track by question.id">
  ...
  <div ng-repeat="tag in question.tags track by tag.id">
    ...
  </div>
</div>

内容的提问来源于stack exchange，提问作者Suchetha H V