Angular select 元素上的 ng-repeat 空选项在离开状态时导致错误

Question

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

我使用 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

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

Answer 2

我试过重现你的代码示例，如果我理解得很好，问题实际上是你没有把你的对象放在数组中，我相信 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 中检查 this。

Answer 3

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

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

我有点疏忽：/

Angular select 元素上的 ng-repeat 空选项在离开状态时导致错误

Angular ng-repeat empty option on select element causes error when leaving state

javascript

angularjs

angularjs-ng-repeat

ng-options

angularjs-ng-options