在 Angular 中，ng-repeat 再次将选项分解为选项

Question

我的js数组是[“标准”，“高级”]

当我第一次单击下拉选项时，它显示选项为标准和高级。选择其中任何一项后，所选值不会显示在框中。如果我再次单击（假设我第一次选择了标准），那么它会给出 s,t,a,n,d,a,r,d 等选项。

我的代码是：

<select id = "red", ng-model="red" class= "form-select">
<option ng-repeat=" r in red">[[red]]</option>
</select>

Answer 1

您对通过

ng-repeat

和

ng-model

进行迭代的列表使用相同的变量名称。

ng-repeat

是选择的选项列表。

ng-model

存储所选值。

在您的代码中，列表和 ng-model 具有相同的名称，因此当您在下拉列表中选择某些内容时，

ng-repeat

会拆分所选值

red

（ng-model）并给出此错误。

为

ng-model

和

ng-repeat

使用不同的变量名称，该错误将得到解决。

var myApp = angular.module('myApp', []);
function LoginController($scope) {
    $scope.options = ["standard", "premium"];
    $scope.red = null;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="LoginController">
<select id = "red", ng-model="red" class= "form-select">
<option ng-repeat="option in options">{{option}}</option>
</select>

<br/>
{{red}}
</div>