ngOptions 使用基本表达式提供奇数渲染值

Question

我在 TypeScript 中有以下 Object 使用 ng-options 为 <select> 定义一些选项：

$scope.sOptions = [
   {
      name: "Female"
   }, 
   {
      name: "Male"
   }];

我为 ng-options 到 AngularJS 提供以下内容：

ng-options="opt.name for opt in sOptions"

这实际上有效，除了根据 ng-option 的文档，value 应该只是构建 <option> 元素时的循环计数器。但是我看到以下呈现：

<option value="?" selected="selected"></option>
<option label="Female" value="object:6">Female</option>
<option label="Male" value="object:7">Male</option>

我希望看到的内容如下所示：

<option value="0" selected="selected"></option>
<option label="Female" value="1">Female</option>
<option label="Male" value="2">Male</option>

为 <option> 元素的 value 生成那些奇数值是我做错了什么？

编辑： 阅读提供的正确答案后，另一个 post 详细介绍了类似的问题以及如何为此使用 track by要求：

Answer 1

发生这种情况是因为您没有在 select 属性中使用 ng-model。 Angular 这样做是为了防止模型 select 意外。您需要绑定 select，"empty" 选项将消失。

<select ng-options="opt.name for opt in sOptions"
    ng-model="someScopeVar">
</select>

Answer 2

为了达到此要求，您必须在 ng-select 中使用 track by。 track by 将帮助您将 select 选项与值标记绑定。您还应该提供一个唯一 ID 字段来跟踪 select 选项。

<select ng-model="selectedName" ng-options="item.Name for item in names track by item.Id">
</select>

在您的控制器中，名称对象将像这样

$scope.names = [{Name: "Name1", Id: 0}, {Name: "Name2", Id: 1}, {Name: "Name3", Id: 2}];

为了初始化 select 选项，您可以通过

设置模型

$scope.selectedName = $scope.names[0];

只有在属性 in select option

中使用track才能初始化作用域变量

ngOptions 使用基本表达式提供奇数渲染值

ngOptions using basic expression providing odd rendered value

angularjs

ng-options

angularjs-ng-options