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

【问题标题】：How to fix undefined result in $scope select options array?如何修复 $scope 选择选项数组中未定义的结果？
【发布时间】：2019-05-26 21:49:05
【问题描述】：

我正在使用 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() 函数添加的任何“名称”作为值或名称添加到下拉选择框中，当然而不是未定义。

【问题讨论】：

标签： javascript arrays angularjs

【解决方案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。

【讨论】：

【解决方案2】：

你可以试试ng-repeat，它比ng-options相对容易

这是一个有效的fiddle

【讨论】：