AngularJS中如何根据SubjectIds勾选对应主题复选框？

首先得说，你的代码确实能实现“匹配ID时勾选复选框”的需求，但存在明显的DOM冗余问题——因为你用了两层ng-repeat，这会导致每个Subjects里的主题被重复渲染，重复次数等于SubjectIds数组的长度。比如如果Subjects有5个主题，SubjectIds有3个ID，那页面上会生成15个复选框，其中只有匹配的那些会被勾选，但其他重复的主题复选框也会显示出来，这既浪费性能，也会给用户带来视觉困扰。

问题出在哪？ #

看你的代码结构：

<div ng-repeat="subj in Subjects">
  <div ng-repeat="sub in SubjectIds">
    <input type="checkbox" ng-model="subjectModel[subj.SubjectId]" ng-checked="subj.SubjectId==sub">{{subj.SubjectName}}
  </div>
</div>

外层循环遍历所有主题，内层循环遍历所有选中的ID，所以每个主题会被渲染SubjectIds.length次。只有当subj.SubjectId == sub时，ng-checked才会让复选框处于勾选状态，但其他重复的主题条目依然会出现在页面上，只是复选框未勾选而已。

更优雅的实现方式 #

我们只需要遍历一次Subjects，然后判断当前主题的ID是否在SubjectIds数组中即可，同时利用Angular的双向绑定来管理勾选状态，不需要两层循环。

步骤1：在控制器中初始化勾选状态模型

先把SubjectIds中的ID映射到一个对象里，这样后续绑定ng-model时能直接对应上：

// 假设这是你的控制器代码
$scope.Subjects = [
  { SubjectId: 1, SubjectName: "数学" },
  { SubjectId: 2, SubjectName: "语文" },
  { SubjectId: 3, SubjectName: "英语" }
];
$scope.SubjectIds = [1, 3]; // 需要勾选的主题ID数组

// 初始化勾选状态模型
$scope.subjectModel = {};
angular.forEach($scope.SubjectIds, function(id) {
  $scope.subjectModel[id] = true;
});

步骤2：简化HTML模板

只需要一层ng-repeat遍历主题，直接绑定ng-model到我们初始化的subjectModel对象上：

<div ng-repeat="subj in Subjects">
  <input 
    type="checkbox" 
    ng-model="subjectModel[subj.SubjectId]"
    id="subject-{{subj.SubjectId}}"
  >
  <label for="subject-{{subj.SubjectId}}">{{subj.SubjectName}}</label>
</div>

这样每个主题只会渲染一次，页面加载时subjectModel中为true的ID对应的复选框会自动勾选，而且勾选状态的变化会实时同步到subjectModel中，完美实现双向绑定。

额外说明 #

如果你不想在控制器里初始化模型，也可以用ng-checked结合数组判断（比如ng-checked="SubjectIds.indexOf(subj.SubjectId) !== -1"），但要注意：当ng-model和ng-checked同时存在时，ng-model的优先级更高，所以这种方式只能用于单向显示勾选状态，无法同步用户的勾选操作到模型中。因此更推荐前面的初始化模型+绑定ng-model的方案，更符合Angular的设计理念。

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