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

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