Question

如果将对象作为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>

任何人都可以解释如何做到这一点？并显示指令设置的示例？我查看了文档，但他们没有适合此模型的示例。

Answer 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也会更新。

使用angularjs中的对象及其属性进行ng-select

1 个答案: