Angular добавляет странные параметры в элемент выбора при установке значения модели

У меня есть элемент select, определенный как таковой:

<select name="country_id" id="country_id" required="required" ng-model="newAddressForm.country_id">
    <option value="">Select Country</option>
    <option ng-repeat="country in countries" value="{{country.id}}">{{country.name}}</option>
</select>

Все работает отлично, когда я не устанавливаю какое-либо значение в директиве, которая содержит этот элемент select. Но когда я делаю что-то вроде newAddressForm.country_id = 98, вместо выбора опции со значением 98, Angular вводит новый в верхней части элемента select, например:

<option value="? string:98 ?"></option>

Что дает? Какой формат это и почему это происходит? Обратите внимание, что если я делаю console.log(newAddressForm.country_id) в директиве, я получаю нормальный "98", это просто странно в сгенерированном HTML.

Изменить: Обновление ситуации. Переключилось на использование ng-select, но проблема не устранена.

Странный элемент больше не появляется, НО, теперь есть еще один элемент наверху, который имеет только знак вопроса ? в качестве значения и никакой метки.

Вот, из того, что я собрал, Angular "none selected". Я все еще не понимаю, почему он не будет выбирать параметр, который я ему скажу, чтобы выбрать.

Выполнение newAddressForm.country_id = 98 по-прежнему не дает результатов. Почему это?

Ответы

Ответ 1

Angular не задает значение элемента выбора фактическим значениям вашего массива и не выполняет некоторые внутренние действия для управления привязкой к сфере. Смотрите первый комментарий Mark Rajcok по этой ссылке:

http://docs.angularjs.org/api/ng.directive:select

Когда пользователь выбирает одну из опций, Angular использует индекс (или ключ) для поиска значения в массиве (или объекте) - это искаженное Значение - это то, для чего установлена ​​модель. (Таким образом, модель не установлена ​​на значение, которое вы видите в HTML! Это вызывает много путаницы.)

Я не уверен, что использование ng-repeat - лучший вариант.

Ответ 2

Используя следующий синтаксис с ng-options, я решил эту проблему для меня:

<select name="country_id" id="country_id" required="required" ng-model="newAddressForm.country_id" ng-options="country.id as country.name for country in countries">
  <option value="">Select Country</option>
</select>

Ответ 3

Если ваши значения являются целыми числами, вы должны использовать "", даже если они не являются строками, эта простая причина - именно то, почему вы получаете опцию с вопросительным знаком в качестве значения.

Вы не должны использовать это:

{ value: 0, name: "Pendiente" },
{ value: 1, name: "Em andamento" },
{ value: 2, name: "Erro" },
{ value: 3, name: "Enviar email" },
{ value: 4, name: "Enviado" }

Это правильный путь:

{ value: "0", name: "Pendiente" },
{ value: "1", name: "Em andamento" },
{ value: "2", name: "Erro" },
{ value: "3", name: "Enviar email" },
{ value: "4", name: "Enviado" }

Если у вас есть хотя бы одна запись, которая не использует "", вы получите это? значение параметра.

Ответ 4

Я столкнулся с этой же проблемой раньше этого вечера, когда увидел, что опция выбора появляется как первая в моем списке, хотя я ее явно не создал. Я заполнил список опций выбора в моем контроллере и использовал тот же синтаксис ng-options, о котором говорилось выше, jessedvrs (кроме того, что я также вставлял опцию "выберите опцию" по умолчанию в контроллере, а не отмечал ее в HTML, как он был).

По какой-то причине в списке выбора всегда будет отображаться дополнительная опция с нулевым индексом со значением "?", но когда я изменил способ заполнения моей опции по умолчанию в контроллере, эта проблема исчезла. Я заполнял опции выбора, создавая вызов API, заполняя их в обещании. Я допустил ошибку, также включив параметр по умолчанию "выберите вариант" в качестве первого, что я сделал в этом обещании, но когда я сделал это вместо обещания (до вызова API), параметры выбора заполняли путь Я ослабил их.

Я думаю, что опция jessedvrs - это одно из решений проблемы (установка параметра по умолчанию в разметке HTML), но если вы предпочитаете заполнять свои параметры в javascript, я бы предложил по-прежнему задавать параметр по умолчанию до совершения каких-либо вызовов к API или процессам, которые все еще могут выполняться во время визуализации HTML.

Ответ 5

Когда вы присваиваете значение некоторому элементу select, AngularJS ищет предоставленное значение в атрибуте value тегов опций в этом элементе select. Но уловка AngularJS делает сравнение на основе типа. Поэтому, если значения в тегах опций являются строками (что обычно имеет место), а переменная, которую вы связываете с помощью ng-model, является числом, AngularJS не находит соответствующий элемент-элемент и, следовательно, создает свой собственный элемент следующим образом:

<option value="? integer:10 ?"></option>

Решение, при привязке себя, преобразует его в соответствующий тип.

В этом случае решением было бы привязать Integer

<select name="country_id" id="country_id" required="required" ng-model="parseInt(newAddressForm.country_id)">
<option value="">Select Country</option>
<option ng-repeat="country in countries" value="{{country.id}}">{{country.name}}</option>
</select>

Если значения заданы как Строки, трюк должен был бы использовать

<select ... ng-model="newAddressForm.country_id.toString()" >

Ответ 6

При нажатии данных на переменную области видимости мы можем использовать следующий код

$scope.enquiryLocationRow.push({'location': EnqLocation.location, 'state_id': Number(EnqLocation.state_id), 'country_id': Number(EnqLocation.country_id)});

он разрешил мою проблему