2012-12-18 73 views
5

我想呈现选择框,但它不能按预期工作 - 选项值不正确。我查manual,根据它的数组的语法(在我的对象的情况下,数组)是ngOptions导致错误值的选项

select as label for value in array 

因此,这里是我在做什么:

数据:

[{"id":"3","name":"asdasd","code":"asdads","group":"2","cost":"0"},{"id":"4","name":"adrf fg df ","code":"dasfasd","group":"2","cost":"0"}] 

模板:

<select ng-model="productToBuy" ng-options="item.id as item.id for item in products"></select> 

渲染结果:

<select ng-model="productToBuy" ng-options="item.id as item.id for item in products" class="ng-pristine ng-valid"> 
    <option value="0" selected="selected">3</option> 
    <option value="1">4</option> 
</select> 

正如我们所见,选项值不会设置为项目的ID。

而且这可能是不正确的语法当源是数组,但试图像这样当i。具有相同的结果:

<select ng-model="productToBuy" ng-options="item.id as item.id for (key, item) in products"></select> 

我把这个代码上jsfiddle。任何帮助赞赏。

+0

您是否需要让'

+3

我们每周大约收到一篇这篇文章。 Angular使用索引作为值,因为它为您处理所有事情。不要担心,只需使用它。这允许你做一些事情,比如选择在你的作用域中设置一个对象,而不仅仅是一个字符串或数字。 –

回答

12

这是ngOptions指令(您看到的输出,其中值是项目的索引,而不是您要从代码示例中传入的id属性)的行为。 ngOptions会将选定的选项数据绑定到您在ngModel中指定的变量。然后,您将使用数据绑定变量而不是选项元素本身的“值”。

HTML:

<select ng-model="selected" ng-options="item.name for item in items"></select> {{ selected }} 

JS:

$scope.items = [ 
    {"id": "3","name":"asdasd","code":"asdads","group":"2","cost":"0"}, 
    {"id": "4","name":"adrf fg df ","code":"dasfasd","group":"2","cost":"0"} 
]; 

在上述例子中,$ scope.selected将代表实际选择的项目。然后,您可以访问任何选定项目的属性:$ scope.selected.name,$ scope.selected.code ...等。

如果您需要预先选择具有上述示例的项目,则可以执行以下操作:

$scope.items = [ 
    {"id": "3","name":"asdasd","code":"asdads","group":"2","cost":"0"}, 
    {"id": "4","name":"adrf fg df ","code":"dasfasd","group":"2","cost":"0"} 
]; 
$scope.selected = $scope.items[1]; // Pre-selected the 2nd item in your array 

如果你仍然需要完全控制你的价值属性,你最好使用NG重复指令,但要记住,如果你这样做,你所选的项目将不会被绑定到数据你的模型。

编辑:注意在“选择作为标签的数组值”语法:

在情况下,其有帮助,你的“item.id的项目。产品中的项目名称“实际上是将ngModel指令中的变量设置为您在语法选择部分中指定的值,因此该表达式所做的是将标签设置为item.name,但绑定$ scope。选中item.id的值,而不是item的整个实例,所以如果你选择了上面例子中的第一个项目,$ scope.selected将等于“3”,但它并没有改变选项元素本身的价值属性

1

您的id的JSON对象中的数据类型为string,而$scope.selected的值为integer。如果你将其中一个切换到另一个,它会正常工作!

这些选项的值仍然是0和1,但Angular的数据绑定为您做了诀窍,并将您在表达式中指定的值(item.id as item.name)绑定到ng - 父元素的模型(select元素)。

1

如果您不需要select元素的ng-model,并要使用select元素的设定值,然后以这种方式实现它:

<select> 
    <option ng-repeat="item in items" value="{{item.value}}"> 
    {{item.text}} 
    </option> 
</select>