ngOptions导致错误值的选项

我想呈现选择框，但它不能按预期工作 - 选项值不正确。我查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。任何帮助赞赏。

来源

2012-12-18 SET

您是否需要让'

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

这是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”，但它并没有改变选项元素本身的价值属性

来源

2012-12-18 14:22:50

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

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

来源

2012-12-18 14:00:58 Tryggve

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

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

来源

2015-08-05 12:37:19

ngOptions导致错误值的选项

回答

相关问题