Ng-options, как установить первый выбор всегда пустой

Я использую angularjs в проекте и в котором я использую ng-options для генерации.

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

<select size="3" ng-model="item" ng-options="s.name for s in itemlist">
<option value="?" selected="selected"></option>
<option value="0">Item 1</option>
<option value="1">Item 2</option>
<option value="2">Item 3</option>
</select>

Но когда я выбираю элемент (например, пункт 2), первый пустой выбор исчезает. Я знаю, что это происходит, когда ng-модель устанавливается по выбору. Но я хочу, чтобы первый выбор всегда был пустым, чтобы пользователь мог reset фильтровать.

Спасибо заранее.

Ответ 1

Это поможет вам:

<select size="3" ng-model="item" ng-options="s.name for s in itemlist">
    <option value="">Select Option</option>
</select>

Ответ 2

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

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

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

Кевин - Sưu Tầm

Ответ 3

Похоже, что лучшим вариантом будет включение пустого элемента в качестве первого элемента в списке элементов.

Ответ 4

Вы можете отказаться от использования ng-options и использовать ng-repeat и сделать первый вариант пустым. См. Пример ниже.

<select size="3" ng-model="item">
    <option value="?" selected="selected"></option>
    <option ng-repeat="s in itemlist" value="{{s.value}}">{{s.name}}</option>
</select>

Ответ 5

Решение, приведенное выше, приведет к повреждению модели с помощью нежелательных данных. Пожалуйста, используйте директиву для reset модели в правильном направлении JS: Выберите опцию

Directive"
 .directive('dropDown', function($filter) {
    return {

        require: 'ngModel',
        priority: 100,
        link: function(scope, element, attr, ngModel) {

            function parse(value) {

                if (value) {

                    if(value === "")
                    {
                        return "crap"
                    }
                    else
                    {
                        return value;
                    }

                } else {
                    return;
                }
            }


            ngModel.$parsers.push(parse);

        }
    };
});

Ответ 6

        <select ng-model="dataItem.platform_id"
            ng-options="item.id as item.value for item in platformList"
            ng-init="dataItem.platform_id=dataItem.platform_id||platformList[0].id"></select>

Ответ 7

контроллер

$scope.item = '';

$scope.itemlist = {
   '' = '',
   'Item 0' = 1,
   'Item 1' = 2,
   'Item 2' = 3
};

HTML

<select data-ng-model="item" data-ng-options="v as k for (k, v) in itemlist"></select>