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后，select元素应保存所选对象的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绑定变量;使用itemAlias，可以返回项目的属性（itemAlias.prop as）或项目本身（itemAlias as）