选择元素上的角度 ng 重复空选项在离开状态时会导致错误

Question

我使用 ng-repeat 指令动态地为 angular 中的<select>元素生成一些选项.js。

我使用ng-repeat而不是ng-options因为这适用于空表单，我想设置一个selected和disabled默认值，以及模型中没有的最后一个选项。

var form = {}; // to be filled with form data, including form.boro
var boros = {"BK":"brooklyn","Q":"queens","NY":"manhattan","BX":"bronx","SI":"staten island"}
<select class='form-control capitalize' name="city" ng-model='form.boro' >
    <option value="" >City</option> 
    <option ng-repeat="(k, val) in boros" value="{{k}}">{{val}}</option>
    <option value='other'>Other</option>
</select>

这生成了预期的元素和选项，但会导致引发以下错误：

TypeError: Cannot read property '$$phase' of null

此错误是由于在<option value="">City</option>中设置value=""而导致

的

该应用程序仍在运行并且不会崩溃，但我很好奇为什么在状态退出时会发生这种情况，以及我是否做错了什么。

Answer 1

看起来将selected disabled放在空的初始选项上可以清除错误。

<option value="" selected disabled >City</option> 

我的

Answer 2

我认为问题出在选项中的{{city}}上，我猜这没有可用的模型。如果我们将 {{boro}} 打印为值，将 {{city}} 打印为文本，我们需要在城市与 boro 中建立关系。或者你可以把所有城市放在一个对象数组中，并通过将boro键发送到控制器函数来获取城市的值，并得到像{{getCity（boro）}}这样的城市，并将boro设置为ng-model="boro"

Answer 3

我尝试重现您的代码示例，如果我理解得很好，问题实际上是您没有将对象放在数组中，我相信ng-repeat在对象集合中执行。您可以将选项放在具有以下格式的数组中，例如 [{代码：BQ，城市：布鲁克林}]。看下面

app.controller('MainCtrl', function($scope) {
    $scope.form = {}; 
    $scope.boros = [
      {code: "BK", city: "brooklyn"}, 
      {code: "Q", city: "queens"},
      {code: "NY", city: "manhattan"},
      {code: "BX", city: "bronx"},
      {code: "SI", city:"staten island"}
    ]
});

和您的模板：

<select class='form-control capitalize' name="city" ng-model='form.boro' >
    <option value="" >City</option> 
    <option ng-repeat="boro in boros track by $index" value="{{boro}}">{{boro.city}}</option>
    <option value='other'>Other</option>
</select>

在 plunker 中检查这一点。