AngularJS中使用两个ng-repeat结合ng-if匹配对象属性

嘿，这个场景我太熟了！直接嵌套ng-repeat加ng-if虽然能实现，但面对你说的250+4600的数据量，肯定会有性能卡顿的问题。我给你分两种方案，先讲基础实现，再给你最优的性能优化方案。

基础实现（适合小数据量，快速验证） #

如果只是先验证功能，你可以直接嵌套两个ng-repeat，用ng-if匹配用户ID：

<!-- 外层遍历250个用户 -->
<div ng-repeat="user in users track by user.ID">
  <h4>{{user.Title}}</h4>
  <!-- 内层遍历4600个关联对象，只显示和当前用户匹配的项 -->
  <div 
    ng-repeat="item in relatedItems track by item.ParentUserLink.ID"
    ng-if="item.ParentUserLink.ID === user.ID"
  >
    <p>{{item.Title}} - 初始密码状态: {{item.InitialPassword}}</p>
  </div>
</div>

这里加了track by是为了AngularJS能更高效地追踪DOM元素，避免重复渲染，也算小优化。但这个方案的问题很明显：每个用户都要遍历4600条数据，总共会执行250*4600=115万次判断，页面加载和渲染会慢得让人抓狂。

性能优化方案（强烈推荐，大数据量必备） #

核心思路是预构建关联映射，把4600条关联数据按用户ID分组，这样后续渲染时直接取对应分组，不用每次遍历整个数组。

第一步：在控制器里构建映射

// 假设你的用户和关联数据已经加载到$scope里了
$scope.users = [/* 你的250个用户数组 */];
$scope.relatedItems = [/* 你的4600个关联对象数组 */];

// 构建一个以用户ID为键的对象，值是对应关联项的数组
$scope.relatedItemsMap = {};

angular.forEach($scope.relatedItems, function(item) {
  const userId = item.ParentUserLink.ID;
  // 如果这个ID还没有分组，先初始化一个空数组
  if (!$scope.relatedItemsMap[userId]) {
    $scope.relatedItemsMap[userId] = [];
  }
  // 把当前关联项加入对应分组
  $scope.relatedItemsMap[userId].push(item);
});

第二步：模板里直接使用映射

现在模板里不用嵌套遍历加判断了，直接根据当前用户ID取对应的关联数组：

<div ng-repeat="user in users track by user.ID">
  <h4>{{user.Title}}</h4>
  <!-- 直接取当前用户对应的关联项，没有的话显示提示 -->
  <div ng-repeat="item in relatedItemsMap[user.ID] || [] track by item.id">
    <p>{{item.Title}} - 初始密码状态: {{item.InitialPassword}}</p>
  </div>
  <p ng-if="!relatedItemsMap[user.ID]" style="color: #999;">暂无相关记录</p>
</div>

为什么这个方案更好？ #

• 构建映射只需要遍历4600条数据一次，之后每个用户的关联项查找都是O(1)的时间复杂度，性能提升不是一点半点。
• 模板逻辑更简洁，AngularJS渲染DOM的压力也小很多，页面加载和交互都会流畅很多。

额外注意点 #

• 如果你的关联数据是异步加载的（比如从API请求），要确保在数据加载完成后再执行映射构建的代码，可以放在then回调里。
• 如果数据会动态更新（比如新增/删除关联项），记得同步更新relatedItemsMap，不然模板不会同步变化。

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