Угловая опция ng-repeat empty на элементе выбора вызывает ошибку при выходе из состояния

Question

Im динамически генерирует некоторые параметры для элемента <select> в файле angular.js с использованием директивы ng-repeat.

Im используя 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 

результаты этой ошибки установки value="" в <option value="">City</option>

приложение все еще работает и не врезаться но мне любопытно, почему это происходит при выходе из штата, и если это что-то, что я делаю неправильно.

Answer 1

Похоже, что размещение selecteddisabled на пустой начальной опции устраняет ошибку.

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

Bit недосмотр с моей стороны:/

Answer 2

Я думаю, проблема связана с {{city}} в опции, у этой модели нет модели, я думаю. Если мы напечатаем как {{boro}} как значение, так и {{city}} как текст, нам нужно иметь отношение в городе против boro. Или вы могли бы поместить весь город в массив объектов и получить значение города с отправкой boro key на функцию контроллера и получить город, как {{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> 

Проверить this в plunker.