Ng-options, how to set the first choice is always empty

Question

I use angularjs in a project and in which I use ng-options to generate.

Initially, when the pages reload and the selection is not selected, html is created as follows:

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

But when I select an item (e.g. item 2), the first empty selection disappears. I know this happens when the ng model is installed by choice. But I want the first selection to always be empty so that the user can reset the filter.

Thanks in advance.

Answer 1

This will help you:

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

Answer 2

For those who refer to “null” as a valid value for one of the parameters (so imagine that “null” is the value of one of the elements in typeOptions in the example below), I found that the easiest way to make sure the automatically added option is hidden , is to use ng-if.

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

Why ng-if and not ng-hide? Since you want the css selectors intended for the first option inside to select the target "real" option, and not the one that is hidden. This becomes useful when you use the protractor to test e2e and (for some reason) you use by.css () to select your selection options.

Kevin - Sưu Tầm

Answer 3

It seems that the best option would be to include an empty element as the first element in the list of elements.

Answer 4

You can refuse to use ng-options and use ng-repeat and make the first option empty. See the example below.

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

The solution given above will damage the model with unwanted data. Please use the directive to reset the model in the right direction JS: Select an 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 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> 

Answer 7

controller

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