I am using angularjs in a project and in which I am using ng-options for generating .
Initially when the pages reload and no option element is selected the html generated like below:
<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 element (ex. Item 2) the first blank select is gone. I know its happening as ng-model is being set by select value. But I want first select always blank so that user can reset the filter.
Thanks in advance.
In my opinion the correct way to set a default value is to simply pre-fill your ng-model property with the value selected from your ng-options , angular does the rest. Essentially when you define the $scope property your select will bind to assign it the default value from your data array.
Definition and Usage. The ng-options directive fills a <select> element with <options>. The ng-options directive uses an array to fill the dropdown list. In many cases it would be easier to use the ng-repeat directive, but you have more flexibility when using the ng-options directive.
Definition and Usage The ng-selected directive sets the selected attribute of an <option> element in a <select> list. The option will be selected if the expression inside the ng-selected attribute returns true. The ng-selected directive is necessary to be able to shift the value between true and false .
The ng-options Directive in AngularJS is used to build and bind HTML elements with options to a model property. It is used to specify <options> in a <select> list. It is designed specifically to populate the items on a dropdown list. This directive implements an array, in order to fill the dropdown list.
This will do the work for you:
<select size="3" ng-model="item" ng-options="s.name for s in itemlist"> <option value="">Select Option</option> </select>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With