如何用ng-options获取JSON部门去重值作为下拉筛选器，实现员工列表过滤

我来帮你搞定这两个问题，咱们拆解来看：

问题1：下拉框出现重复部门选项 #

你当前的下拉框直接遍历了users数组，每个用户对应一个选项，自然会出现重复的部门。解决思路是先从用户列表中提取不重复的部门名称集合，用这个集合作为下拉框的数据源。

修改你的Scope代码 #

在现有代码基础上添加一行，生成去重后的部门列表：

var self = this;
self.users = [{ department: "A", name: "santos" }, { department: "B", name: "suarez" }, { department: "C", name: "domingo" }, { department: "A", name: "james" }, { department: "B", name: "black" }, { department: "C", name: "de leon" }, { department: "A", name: "dela cruz" }, { department: "B", name: "robertson" }, { department: "C", name: "williams" }, { department: "A", name: "crawford" }, { department: "B", name: "garcia" }, { department: "C", name: "navarro" }, { department: "A", name: "lim" }, { department: "B", name: "lee" }, { department: "C", name: "vasquez" }, { department: "A", name: "montano" }, { department: "B", name: "trump" }, { department: "C", name: "arroyo" }, { department: "A", name: "aquino" }, { department: "B", name: "duterte" }];
// 新增：提取不重复的部门列表
self.departments = Array.from(new Set(self.users.map(user => user.department)));

问题2：选中部门后仅显示单个员工 #

之前的filter绑定的是整个用户对象，AngularJS的filter会严格匹配对象的所有属性，所以只会找到和选中对象完全一致的那一个员工。现在我们需要让筛选只匹配department字段，同时把下拉框的ng-model改为绑定部门字符串。

修改你的HTML代码 #

<!-- 部门筛选下拉框：使用去重后的部门列表，绑定部门字符串 -->
<select class="form-control" ng-options="dept as dept for dept in formsDcfCtrl.departments" ng-model="selectedDepartment">
    <option value="" selected>Departments</option>
</select>

<!-- 多选员工列表：根据选中的部门字符串，筛选department字段匹配的员工 -->
<select multiple class="form-control" ng-options="x as x.name for x in formsDcfCtrl.users | filter:{department: selectedDepartment}" ng-model="usersList"></select>

验证效果 #

现在下拉框里只会显示唯一的A、B、C三个部门选项，选中任意部门后，下方多选列表会自动展示该部门的所有员工，完全符合你的需求。

内容的提问来源于stack exchange，提问作者Elbert John Felipe