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

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

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

3
yevg 9 Янв 2017 в 22:45

3 ответа

Лучший ответ

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

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

Немного недосмотра с моей стороны: /

1
yevg 9 Янв 2017 в 22:07

Я попытался воспроизвести ваш пример кода, если я правильно понял, проблема в том, что вы не помещаете свои объекты в массив, я считаю, что ng-repeat работает в коллекции объектов. Вы можете поместить свои параметры в массив в следующем формате, например. [{code: BQ, city: Brooklyn}]. Смотри ниже

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>

Проверьте этот в плунжере.

0
frodrigues 9 Янв 2017 в 20:25

Я думаю, что проблема с {{city}} в опции, это не модель, я думаю. Если мы печатаем оба {{boro}} как значение и {{city}} как текст, мы должны иметь отношение в городе против боро. Или вы можете поместить весь город в массив объектов и получить значение города, отправив ключ боро в функцию контроллера и получить город как {{getCity (boro)}}} и установить бор как ng-model = "boro "

0
Ganesh Madhu 9 Янв 2017 в 20:03