AngularJs Select ng-model 不使用外键值

Question

假设我有一个服务，它提供了一个对象列表，我想在 <select> 元素中作为选项加载这些对象。

服务方法是myReferenceList.getCachedList()。

它返回一个具有以下结构的对象数组：

[
  {
    ReferenceId: "guid-1234", 
    ReferenceName: "some string",
    SomeRandomRefField: 5  
  },
  // etc...
]

在我的控制器中，我定义了一个 $scope.dataRow 变量，如下所示：

$scope.dataRow = {
   ReferenceIdFk: "guid-2345",
   // etc...
}

我想用来自myReferenceList.getCachedList() 的数据加载选择选项列表，显示的文本来自ReferenceName，不可见的值来自ReferenceId。

我想将此选择项与$scope.dataRow.ReferenceIdFk 挂钩，如下所示：

ng-model="dataRow.ReferenceIdFk"

当一切都说完了，并且数据被加载到$scope.dataRow.ReferenceIdFk 中时，选择元素应该保存所选对象的ReferenceId 值。当用户在选择列表中选择不同的项目时，$scope.dataRow.ReferenceIdFk 中的值应该会自动更改为正确的值。

我怎样才能让它工作？

将值加载到选择列表中很容易。将自动绑定到 $scope.dataRow.ReferenceIdFk 中的基础数据值似乎不起作用。

显然，我可以手动插入一些程序代码以使此绑定工作，但我试图了解如何使用角度特征以声明方式使其工作。有可能吗？

Answer 1

ng-options 提供了一个微语法来声明如何映射数组中的对象以显示值和选择的结果：

Angular 的 documentation 提供了完整的语法，但对于您的情况，以下应该可以工作：

<select ng-model="dataRow.ReferenceIdFk" 
  ng-options="i.ReferenceId as i.ReferenceName for i in myReferenceList.getCachedList()">
</select>

简而言之，微语法是：

"<valueExp> as <displayExp> for <itemAlias> in <arrayExp>"

地点：

• arrayExp: 是返回值数组的表达式
• itemAlias：是数组中每一项的别名；可以随心所欲
• displayExp：用于每个标签的字符串表达式；使用itemAlias
• valueEx：一个表达式，其值被赋值给 ngModel-bound 变量；使用 itemAlias，并且可以返回项目的属性 (itemAlias.prop as) 或项目本身 (itemAlias as)