使用具有多个对象和范围的 ngOptions 和 ngModel答案

【问题标题】：using ngOptions & ngModel with multiple objects & scopes使用具有多个对象和范围的 ngOptions 和 ngModel
【发布时间】：2015-12-18 21:15:40
【问题描述】：

我在选择字段上使用 ngOptions 来生成选项列表。

我想做的是让下拉列表填充完整的部门列表，但根据用户分配到的部门选择默认选项。

对于每个用户，他们只能分配到一个部门，但每个下拉列表都包含相同的部门列表。

所以我需要以某种方式将 users.departments.key 加入 users.list.departmentId，同时保持 ngModel 中的所有内容都在适当的范围内。

我可以更改存储部门的位置（$scope 中的任何位置），但更改 $scope.users 会导致应用程序的其他位置出现问题。

$scope.users.departments = [
  {
    key: 123, 
    value: 'Advertising'
  },
  {
    key: 114,
    value: 'Editorial'
  },
  {etc}]

$scope.users.list = [
    {
      firstName: 'john',
      lastname: 'smith',
      departmentId: 123
    },
    {etc},
    {etc}]

Plunkr 链接在这里：http://plnkr.co/edit/7CuIxwUX3Qrb8qxUm3n0?p=preview

使用 ngOptions 中的上述 select 语句，我可以让所有部门出现在下拉列表中，但我不知道如何让每个用户显示该选项。另外，我希望能够在更改时触发回调函数。

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

我已经修改了您的 Plunkr，所以它可以按您的预期工作。

基本上，您只需要更改呈现选项的方式，将模型设置为用户的部门 ID，并将部门键设置为所选选项的值。

<select name="departmentSelect" 
        ng-model="u.departmentId" 
        ng-options="department.key as department.value for department in users.departments">
</select>

干杯，巴勃罗。

【讨论】：