javascript - 如何修复 $scope 选择选项数组中的未定义结果？

Question

我正在使用 AngularJS 并尝试设置一个选择保管箱字段，其中包含包含在数组中的选项，并由最终用户通过输入框添加。我已将 $scope 成功添加到数组中，但下拉选择框只显示所有选项的“未定义”。

我一直在寻找类似的答案，但没有一个专门解决我的错误，或者使用的 Angular 2+ 无济于事。

<select class="form-control" id="maidOfHonor" ng-model="name"
        ng-options="names.value as names.value for name in names">
</select>

$scope.names = [
    {
        name: "Position Not Filled",
        value: "Position Not Filled"
    }
];
$scope.addName = function() {
    $scope.names.push({ name: this.party.addName, value: this.party.addName });
    console.log($scope.names);
}

理想情况下，我希望通过 $scope.addName() 函数添加的任何“名称”作为值或名称添加到下拉选择框，而不是当然是未定义的。

Answer 1

在我看来，您的问题是 ng-options 语法。

代替:

ng-options="names.value as names.value for name in names"

尝试

ng-options="name.value as name.name for name in names"

name.value 是从 ng-model 获取或设置的值。

name.name 是显示为选项文本的值。

请注意，引用的变量以 name 开头，而不是原始代码中的 names。