Почему AngularJS включает пустую опцию в select?

Я работаю с AngularJS в течение последних нескольких недель, и одна вещь, которая меня действительно беспокоит, это то, что даже после попытки всех перестановок или конфигурации, определенной в спецификации на http://docs.angularjs.org/api/ng .directive: select , я все еще получаю пустую опцию в качестве первого дочернего элемента select.

Вот Джейд:

select.span9(ng-model='form.type', required, ng-options='option.value as option.name for option in typeOptions');

Вот контроллер:

$scope.typeOptions = [
    { name: 'Feature', value: 'feature' },
    { name: 'Bug', value: 'bug' },
    { name: 'Enhancement', value: 'enhancement' }
];

Наконец, вот HTML, который генерируется:

<select ng-model="form.type" required="required" ng-options="option.value as option.name for option in typeOptions" class="span9 ng-pristine ng-invalid ng-invalid-required">
    <option value="?" selected="selected"></option>
    <option value="0">Feature</option>
    <option value="1">Bug</option>
    <option value="2">Enhancement</option>
</select>

Что мне нужно сделать, чтобы избавиться от этого?

PS: Вещи работают и без этого, но это выглядит странно, если вы используете select2 без множественного выбора.

Пустой optionгенерируется, когда значение, на которое ссылается, ng-modelне существует в наборе параметров, переданныхng-options . Это происходит для предотвращения случайного выбора модели: AngularJS может видеть, что исходная модель либо не определена, либо отсутствует в наборе параметров, и не хочет самостоятельно определять значение модели.

Если вы хотите избавиться от пустой опции, просто выберите начальное значение в вашем контроллере, например:

$scope.form.type = $scope.typeOptions[0].value;

Вот jsFiddle: http://jsfiddle.net/MTfRD/3/

Вкратце: пустая опция означает, что ни одна действительная модель не выбрана (под действительной я имею в виду: из набора опций). Вам нужно выбрать правильное значение модели, чтобы избавиться от этой пустой опции.

Если вам нужно начальное значение, см. Ответ @ pkozlowski.opensource, какой FYI также можно реализовать в представлении (а не в контроллере) с помощью ng-init:

<select ng-model="form.type" required="required" ng-init="form.type='bug'"
  ng-options="option.value as option.name for option in typeOptions" >
</select>

Если вам не нужно начальное значение, «в элемент может быть вложен один жестко запрограммированный элемент со значением, установленным в пустую строку. Этот элемент будет представлять нулевую или« не выбранную »опцию»:

<select ng-model="form.type" required="required"
  ng-options="option.value as option.name for option in typeOptions" >
    <option style="display:none" value="">select a type</option>
</select>

Угловой <1.4

Для всех, кто рассматривает «null» как допустимое значение для одного из параметров (поэтому представьте, что «null» - это значение одного из элементов в typeOptions в примере ниже), я нашел этот простой способ убедиться, что автоматически добавлено опция скрыта - это использовать ng-if.

<select ng-options="option.value as option.name for option in typeOptions">
    <option value="" ng-if="false"></option>
</select>

Почему нг-если, а не нг-скрыть? Поскольку вы хотите, чтобы селекторы css были нацелены на первый вариант внутри, выберите таргетинг на «реальный» вариант, а не тот, который скрыт. Это становится полезным, когда вы используете транспортир для тестирования e2e и (по любой причине) вы используете by.css () для выбора параметров.

Угловой> = 1.4

Из-за рефакторинга директив select и options использование ng-ifбольше не является жизнеспособным вариантом, поэтому вам нужно обратиться к нему, ng-show="false"чтобы оно снова заработало.

Может быть, кому-то пригодится:

Если вы хотите использовать обычные параметры вместо ng-options, вы можете сделать следующее:

<select ng-model="sortorder" ng-init="sortorder='publish_date'">
  <option value="publish_date">Ascending</option>
  <option value="-publish_date">Descending</option>
</select>

Установите модель в линию. Используйте ng-init, чтобы избавиться от пустой опции

Нечто подобное происходило и со мной и было вызвано обновлением до угловой версии 1.5. ng-initКажется, в новых версиях Angular выполняется синтаксический анализ типа . В старшем угловом ng-init="myModelName=600"будет отображаться в качестве опции со значением «600» , то есть , <option value="600">First</option>но в угловому 1.5 он не найдет это , как это , кажется, рассчитывая найти вариант со значением 600 т <option value=600>First</option>. Затем Angular вставит случайный первый элемент:

<option value="? number:600 ?"></option>

Угловой <1.2.x

<select ng-model="myModelName" ng-init="myModelName=600">
  <option value="600">First</option>
  <option value="700">Second</option>
</select>

Угловой> 1.2

<select ng-model="myModelName" ng-init="myModelName='600'">
  <option value="600">First</option>
  <option value="700">Second</option>
</select>

Среди множества ответов здесь я решил опубликовать решение, которое сработало для меня, и выполнить все следующие условия:

• предоставил заполнитель / подсказку, когда ng-модель ложна (например, "--select region--" w. value="")
• когда значение ng-модели ложно, и пользователь открывает раскрывающийся список параметров, выбирается местозаполнитель (другие решения, упомянутые здесь, делают первый параметр выбранным, что может вводить в заблуждение)
• Позволяет пользователю отменить выбор действительного значения, по существу, снова выбирая ложное значение / значение по умолчанию

код

<select name="market_vertical" ng-model="vc.viewData.market_vertical"
    ng-options="opt as (opt | capitalizeFirst) for opt in vc.adminData.regions">

    <option ng-selected="true" value="">select a market vertical</option>
</select>

ЦСИ

оригинальные вопросы и ответы - https://stackoverflow.com/a/32880941/1121919

Быстрое решение:

select option:empty { display:none }

Надеюсь, это кому-нибудь поможет. В идеале выбранный ответ должен быть подходом, но если в случае, если это невозможно, то должен работать как патч.

Да, ng-модель создаст пустое значение опции, когда свойство ng-модели неопределено. Мы можем избежать этого, если мы назначим объект для ng-модели

пример

угловое кодирование

$scope.collections = [
    { name: 'Feature', value: 'feature' }, 
    { name: 'Bug', value: 'bug' }, 
    { name: 'Enhancement', value: 'enhancement'}
];

$scope.selectedOption = $scope.collections[0];


<select class='form-control' data-ng-model='selectedOption' data-ng-options='item as item.name for item in collections'></select>

Важная заметка:

Присвойте объект массива как $ scope.collections [0] или $ scope.collections [1] для ng-модели, не используйте свойства объекта. если вы получаете значение параметра select с сервера, используя функцию обратного вызова, присвойте объект ng-модели

ПРИМЕЧАНИЕ от углового документа

Примечание: ngModel сравнивает по ссылке, а не по значению. Это важно при привязке к массиву объектов. см. пример http://jsfiddle.net/qWzTb/

Я пытался много раз, наконец, я нашел это.

Хотя ответы @ pkozlowski.opensource и @ Mark верны, я хотел бы поделиться своей слегка измененной версией, где я всегда выбираю первый элемент в списке, независимо от его значения:

<select ng-options="option.value as option.name for option in typeOptions" ng-init="form.type=typeOptions[0].value">
</select>

Я использую Angular 1.4x, и я нашел этот пример, поэтому я использовал ng-init, чтобы установить начальное значение в select:

<select ng-init="foo = foo || items[0]" ng-model="foo" ng-options="item as item.id for item in items"></select>

Я столкнулся с той же проблемой. Если вы публикуете угловую форму с обычной публикацией, то вы столкнетесь с этой проблемой, так как угловая форма не позволяет вам устанавливать значения для параметров, которые вы использовали. Если вы получите значение «form.type», то вы найдете правильное значение. Вы должны разместить угловой объект сам, а не форму сообщения.

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

Хорошо, на самом деле ответ очень прост: когда есть опция, не распознаваемая Angular, она включает тусклую. Что вы делаете неправильно, когда вы используете ng-options, он читает объект, скажем[{ id: 10, name: test }, { id: 11, name: test2 }] right?

Это то, чем должно быть значение вашей модели, чтобы оценить его как равное, скажем, вы хотите, чтобы выбранное значение было равно 10, вам нужно установить для вашей модели значение, подобное { id: 10, name: test }выбору 10, поэтому она НЕ будет создавать этот мусор.

Надеюсь, это поможет всем понять, я очень старался :)

Это решение работает для меня:

<select ng-model="mymodel">    
   <option ng-value="''" style="display:none;" selected>Country</option>
   <option value="US">USA</option>
</select>

Это сработало для меня

<select ng-init="basicProfile.casteId" ng-model="basicProfile.casteId" class="form-control">
     <option value="0">Select Caste....</option>
     <option data-ng-repeat="option in formCastes" value="{{option.id}}">{{option.casteName}}</option>
 </select>

Это прекрасно работает

<select ng-model="contact.Title" ng-options="co for co in['Mr.','Ms.','Mrs.','Dr.','Prof.']">
    <option style="display:none" value=""></option>
</select>

способ, которым это работает, состоит в том, что это дает первую опцию, которая будет отображаться перед выбором чего-либо, и display:noneудаляет ее из выпадающего списка, так что если вы хотите, вы можете сделать

<select ng-model="contact.Title" ng-options="co for co in['Mr.','Ms.','Mrs.','Dr.','Prof.']">
    <option style="display:none" value="">select an option...</option>
</select>

и это даст вам select and option перед выбором, но после выбора он исчезнет, ​​и он не будет отображаться в раскрывающемся списке.

Попробуйте это в вашем контроллере, в том же порядке:

$scope.typeOptions = [
    { name: 'Feature', value: 'feature' }, 
    { name: 'Bug', value: 'bug' }, 
    { name: 'Enhancement', value: 'enhancement' }
];
$scope.form.type = $scope.typeOptions[0];

Вот исправление:

для образца данных, таких как:

financeRef.pageCount = [{listCount:10,listName:modelStrings.COMMON_TEN_PAGE},    
{listCount:25,listName:modelStrings.COMMON_TWENTYFIVE_PAGE},
{listCount:50,listName:modelStrings.COMMON_FIFTY_PAGE}];

Опция выбора должна быть такой:

<select ng-model="financeRef.financeLimit" ng-change="financeRef.updateRecords(1)" 
class="perPageCount" ng-show="financeRef.showTable" ng-init="financeRef.financeLimit=10"
ng-options="value.listCount as value.listName for  value in financeRef.pageCount"
></select>

Суть в том, что когда мы пишем value.listCountкак value.listName, он автоматически заполняет текст, value.listNameно значение выбранной опции равно, value.listCountхотя значения мои показывают нормальные 0,1,2 .. и так далее !!!

В моем случае, financeRef.financeLimitэто фактически захват, value.listCountи я могу динамически манипулировать контроллером.

Я хотел бы добавить, что если начальное значение исходит из привязки какого-либо родительского элемента или компонента 1.5, убедитесь, что передан правильный тип. Если используется @в связывании, переданная переменная будет строкой, и если параметры, например,. целые числа, тогда появится пустая опция.

Либо правильно анализируйте значение в init, либо связывайте с <и нет @(менее рекомендуется для производительности, если в этом нет необходимости).

Простое решение

<select ng-model='form.type' required><options>
<option ng-repeat="tp in typeOptions" ng-selected="    
{{form.type==tp.value?true:false}}" value="{{tp.value}}">{{tp.name}}</option>

Решение для измельчения с помощью jQuery, когда у вас нет контроля над параметрами

HTML:

<select id="selector" ng-select="selector" data-ng-init=init() >
...
</select>

ЯШ:

$scope.init = function () {
    jQuery('#selector option:first').remove();
    $scope.selector=jQuery('#selector option:first').val();
}

Если вы используете ng-init вашу модель для решения этой проблемы:

<select ng-model="foo" ng-app ng-init="foo='2'">

у меня была такая же проблема, я (убрал "ng-модель") изменил это:

<select ng-model="mapayear" id="mapayear" name="mapayear" style="  display:inline-block !important;  max-width: 20%;" class="form-control">
  <option id="removable" hidden> Selecione u </option>
    <option selected ng-repeat="x in anos" value="{{ x.ano }}">{{ x.ano }}
</option>
</select>

к этому:

<select id="mapayear" name="mapayear" style="  display:inline-block !important;  max-width: 20%;" class="form-control">
  <option id="removable" hidden> Selecione u </option>
    <option selected ng-repeat="x in anos" value="{{ x.ano }}">{{ x.ano }}
</option>
</select>

теперь это работает, но в моем случае это было причиной того, что я удалил эту область из ng.controller, проверьте, не делали ли вы то же самое.

Привет, у меня было несколько мобильных ссылок jQUery, и я их удалил. С jQuery mobile у меня не работало ни одно из вышеперечисленных исправлений. (Здорово, если кто-то может объяснить конфликт между jQuery Mobile и Angular JS)

https://guntucomputerhacks.blogspot.com.au/2017/10/angular-js-drop-down-first-options-vs.html

Единственное, что сработало для меня, это использование track byв ng-options, вот так:

 <select class="dropdown" ng-model="selectedUserTable" ng-options="option.Id as option.Name for option in userTables track by option.Id">

Обратитесь к примеру из документации angularjs, как преодолеть эти проблемы.

1. Перейдите по этой ссылке документации здесь
2. Найти ' Binding select к нестроковому значению с помощью синтаксического анализа / форматирования ngModel '
3. Там вы можете видеть, что директива с именем convertToNumber решает проблему.

Меня устраивает. Также можете посмотреть, как это работает здесь

Мы можем использовать CSS, чтобы скрыть первый вариант, но он не будет работать в IE 10, 11. Лучший способ - удалить элемент с помощью Jquery. Это решение работает для основных браузеров, протестированных в Chrome и IE10, 11

Также, если вы используете угловой, иногда работает setTimeout

$scope.RemoveFirstOptionElement = function (element) {
    setTimeout(function () {
        $(element.children()[0]).remove();
    }, 0);
};