【问题标题】:How to use ng-options with a dictionary style object?如何将 ng-options 与字典样式对象一起使用?
【发布时间】:2015-10-08 19:26:32
【问题描述】:

我有一个如下所示的数据源:

var options = {
    "A": { name: "Bob", SSN: "111-22-3333" },
    "B": { name: "Sue", SSN: "444-55-6666" }
};

我想使用 ng-options 让用户从上面的选项中选择一个人。

我编写的 HTML 如下所示:

<select ng-model="ctrl.selectedPerson" ng-options="label for (value, label) in ctrl.options"></select>

这导致我能够选择一个选项,但它显示 [object Object] 作为每个选项的选择文本。

我认为问题在于我需要指定要显示选项的名称字段,但我对 ng-options 属性的语法完全感到困惑。

如何将 ng-options 用于此字典式数据源?

【问题讨论】:

  • 回想起来,看起来 Angular 是为使用数组而不是字典而设计的。它可以在这里工作,但我在使用 Angular 的其他功能和字典时遇到了问题,例如过滤。

标签: angularjs ng-options


【解决方案1】:

关闭语法 - 它是 value as text for (key, val) in obj - 所以你的将是:

ng-options="label as label.name for (value, label) in ctrl.options"

每个对象的name 属性将是上面示例中的文本 - 而值是整个对象。

【讨论】:

  • 谢谢。这正是我所需要的。假设老板来了,说他要选择的值是SSN。有没有一种简单的方法来指定选项值应该是什么?
  • @DanielAllenLangdon -- 是的 - 将 label 更改为 label.SSN - 所以新选项变为:label.SSN as label.name for (value, label) in ctrl.options - 预选一个选项 - 只需将选择上的 ngModel 设置为 SSN你想被选中。
  • 谢谢。但在这种情况下,看起来选项标签和选项值都取自 (value, label) 中的标签。那么(value, label)中的“值”又代表什么?
  • @DanielAllenLangdon -- 上面的value 是对象键。 {"A":{}, "B":{}} - value 将是 A 或 B
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-12-23
  • 1970-01-01
  • 2015-02-15
  • 2014-05-29
相关资源
最近更新 更多