与物体NG-选择其在angularjs特性 [英] ng-select with an object and its properties in angularjs

问题描述

我一直在试图找出如何使用数组，如果对象是一个NG-选择指令

I have been trying to figure out how to use an array if objects as the key values for an ng-select directive

这是我想使用的数据

$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>

谁能解释如何做到这一点？并显示出设置了指令的例子吗？我看过的文档，但他们没有适合为这种模式的例子。

Can anyone explain how to do this ? and show a an example of the directive set up? I have looked at the docs but they don't have an example that fits for the this model.

推荐答案

NG-选项支持阵列和基于对象的数据源。例如：

ng-options supports both array and object based data source. For example:

基于阵列的数据源：

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

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

基于对象的数据源：

Object based data source:

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

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

但是，你正在使用的基于阵列的选项不兼容的数据结构。你可以使用这样的：

However, you are using an incompatible data structure for the array based option. You can use like this:

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

和使用选择的值作为 selected.value 。 （选绑定到数组中的对象之一）。如果您要提交通过HTTP表单这是不行的，所以在这种情况下，你应该选项转换为上述数据结构中的一个。

and use the selected value as selected.value. (selected is bound to one of the objects in the array). This won't work if you want to submit the form via HTTP, so in this case you should convert the options to one of the data structure mentioned above.

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

I've included these three usage here: http://plnkr.co/IEBQkqJNifY5MZWloDP6

编辑：所以我在今天的文档又看了看，发现与原始数据结构的工作方式

So I looked at the docs again today and found the way to work with your original data structure.

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

该plnkr也被更新。

The plnkr is updated also.

这篇关于与物体NG-选择其在angularjs特性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！