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

Question

Я использую 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-модель устанавливается по выбору. Но я хочу, чтобы первый выбор всегда был пустым, чтобы пользователь мог сбросить фильтр.

Заранее спасибо.

Answer 1

Это сделает работу за вас:

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

Answer 2

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

Answer 3

Вы можете отказаться от использования 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> 

Answer 4

Для тех, кто там что лечить «нулевой», как допустимое значение для одного из вариантов (так представьте себе, что «нулевой» является значением один из элементов в 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() для выбора опций выбора.

Kevin - Суу Tam

Answer 5

 <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> 

Answer 6

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

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); 

     } 
    }; 
}); 

Answer 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>