angularjs - ngOptions 导致选项值错误

Question

我正在尝试渲染选择框，但它没有按预期工作 - 选项值不正确。我查了manual ，根据它，数组(在我的例子中是对象数组)的语法是

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。

此外，当源是数组时，这可能不是正确的语法，但我在尝试这样的时候得到相同的结果:

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

我把这段代码放在 jsfiddle .任何帮助表示赞赏。

Answer 1

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

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-repeat 指令，但请记住，如果您这样做，您选择的项目将不会被数据绑定(bind)到您的模型。

编辑:关于“选择作为数组中值的标签”语法的注意事项:

如果它有帮助，您的“item.id as item.name for item in products”实际上是将 ngModel 指令中的变量设置为您在语法的选择部分中指定的值。所以该表达式所做的是将标签设置为 item.name，但将 $scope.selected 绑定(bind)到 item.id 的值，而不是绑定(bind)到 item 本身的整个实例。因此，如果您选择了上面示例中的第一项，则 $scope.selected 将等于“3”。它实际上并没有改变 option 元素本身的 value 属性。