ng-select 使用 angularjs 中的对象及其属性答案

【问题标题】：ng-select with an object and its properties in angularjsng-select 使用 angularjs 中的对象及其属性
【发布时间】：2013-12-19 02:07:33
【问题描述】：

我一直试图弄清楚如果对象作为 ng-select 指令的键值，如何使用数组

这是我要使用的数据

$scope.selectValues [
    {name: "Options 1", value: "11"}, 
    {name: "Options 2", value: "22"}
    {name: "Options 3", value: "33"}
];

我希望输出是

<select>
    <option value="11">Options 1</option>
    <option value="22">Options 2</option>
    <option value="33">Options 3</option>
</select>

谁能解释一下如何做到这一点？并显示一个指令设置的例子？我查看了文档，但他们没有适合此模型的示例。

【问题讨论】：

标签： javascript angularjs angularjs-directive

【解决方案1】：

ng-options 支持基于数组和对象的数据源。例如：

基于数组的数据源：

$scope.options = ["Blue", "Red", "Yellow"]

<select ng-model="selected"
        ng-options="for o in options">

基于对象的数据源：

$scope.options = {
  "Blue": "color_1",
  "Red": "color_2",
  "Green": "color_3"
}

<select ng-model="selected"
        ng-options="name for (name, value) in options">

但是，您对基于数组的选项使用了不兼容的数据结构。你可以这样使用：

<select ng-model="selected"
        ng-options="o.name for o in options">

并将所选值用作selected.value。（selected 绑定到数组中的对象之一）。如果您想通过 HTTP 提交表单，这将不起作用，因此在这种情况下，您应该将选项转换为上述数据结构之一。

我在这里包含了这三个用法：http://plnkr.co/IEBQkqJNifY5MZWloDP6

编辑：所以我今天再次查看了文档，并找到了使用原始数据结构的方法。

<select ng-model="selected"
        ng-options="o.value as o.name for o in options">

plnkr 也更新了。

【讨论】：

感谢这工作。这方面的文档非常有限，但现在我改变了我的数据结构并且一切正常。再次感谢
抱歉，我忽略了文档。有一种方法可以使用原始数据结构，请参阅我的编辑。
@tungd 您的第三个示例实际上不起作用。它将值设置为索引而不是 o.value 我刚刚意识到您需要添加“track by o.value”才能使值正常工作
我不确定你在说什么例子，你能补充更多细节吗？我检查了 Plnkr，所有示例都按预期工作。谢谢。