角度注入“字符串:" ng-options中的值之前 [英] Angular injects "string:" before value in ng-options

问题描述

我有一个ng-options列表，其中定义了HTML选择元素，例如:

I have a ng-options list defined with a HTML select element such as:

<select
    required="required"
    ng-model="vm.selectedOption"
    ng-options="item.name as item.label for item in vm.options">

    <option value="">Select an option</option>
</select>

但这会导致以下HTML:

This however results in the following HTML:

<option value="string:VALUE" label="Option Name">Option Name</option>

我正在使用Angular版本1.4.8，有人能解决string:问题还是至少可以向我解释为什么会发生这种情况?

I am using Angular version 1.4.8, does anyone have a solution how to solve the string: issue or at least can explain to me why this is occurring?

vm.options数组如下所示:

[
  {
    "name": "INFILL_AUTOMATIC",
    "label": "Automatic"
  },
  {
    "name": "INFILL_GRID",
    "label": "Grid"
  }
]

//

登录vm.selectedOption时，我只会看到正确的值.因此ng-model实际上确实具有正确的值.但是，为什么Angular给出默认的value然后是该前缀，它是使用该前缀来定义ng-model或其他类型的类型"吗?

When logging vm.selectedOption I just see the correct value. So the ng-model does in fact have the correct value. But why is Angular giving the default value then this prefix, is it using this prefix to define the "type" for the ng-model or something?

推荐答案

此行为记录在角度更改日志中，作为Angular 1.4-beta.0的重大更改. https://github.com/angular/angular .js/blob/master/CHANGELOG.md#breaking-changes-17

This behavior is documented in the angular changelogs, as a breaking change for Angular 1.4-beta.0. https://github.com/angular/angular.js/blob/master/CHANGELOG.md#breaking-changes-17

基本上，为了保留ng-options内的重复检查，如果向ng-options提供了原始值列表，则该值的类型将附加在该值之前，以便创建一个唯一的哈希键以进行跟踪(这有所不同)从较早版本的angular中，该版本将按集合中项目的索引或键进行跟踪.

Basically, in order to preserve duplicate checking within ng-options, if a list of primitive values are supplied to ng-options, the value's type is prepended to the value in order to create a unique hash key to track (this differs from earlier versions of angular, which would track by the index or the key of the item in the collection).

实际上，这不应影响ng-options的大多数用法.如果对保留下拉菜单的value参数很重要，则可以在ng-options中使用track by参数，以提供用于重复跟踪的备用键.

In practice, this should not affect most usages of ng-options. If it is important for you to preserve the value parameter of the dropdown, you can use the track by parameter in ng-options in order to provide an alternate key to be used for duplicate tracking.

请注意，这与ng-repeat不同，因为ng-repeat无法使用此方法生成代理密钥，因为它会影响重复元素的行为.因此，如果将没有track by子句的重复列表传递给ng-repeat，则ng-repeat将产生错误并且不呈现项目，而ng-options可以呈现该列表.

Note that this differs from ng-repeat, in that ng-repeat cannot generate a surrogate key using this method, since it would affect the behavior of the repeated elements. Therefore if a duplicated list is passed to ng-repeat without a track by clause, ng-repeat will produce an error and not render the items, where ng-options is able to render the list.

这篇关于角度注入“字符串:" ng-options中的值之前的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！