5

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

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上。任何帮助表示赞赏。

4

3 回答 3

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

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

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

于 2012-12-18T14:22:50.873 回答
1

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

选项的值仍然是 0 和 1，但是 Angular 的数据绑定可以为您解决问题，并将您在表达式中指定的值（item.id作为 item.name）绑定到父元素的 ng-model （选择元素）。

于 2012-12-18T14:00:58.773 回答
1

如果您不需要元素并且想要使用元素的选定值，ng-model则以这种方式实现它：selectselect

<select>
  <option ng-repeat="item in items" value="{{item.value}}">
    {{item.text}}
  </option>
</select>
于 2015-08-05T12:37:19.177 回答