It appears that when you create a select element inside of a directive, it creates a sort of dummy option (I assume since at this point it doesn't know what to set it to and doesn't want to make assumptions). The top option below is the option I mean:
<select ng-model="optionVal">
<option value="? undefined:undefined ?"></option>
<option value="opt1">Option One</option>
<option value="opt2">Option Two</option>
</select>
Functionally everything works, but having that empty entry in the select box is ugly, and I'd like to remove it. Does anyone know a way to do that?
That option is created because your model does not contain one of opt1 or opt2, so it creates an option to match the current value of your model. The way to avoid that is to set your model to a value first.
Related
When I use select option, the first option of ng-option shows always blank till I select the value.
I have tried option also:
<select class="form-control" ng-model="userDetails.selectedtimezone">
<option ng-repeat="selecttimezonelist in timezones" ng-selected="userDetails.selectedtimezone == selecttimezonelist.id" value="{{selecttimezonelist.id}}">{{selecttimezonelist.timezone}}</option>
</select>
By angular way
<select class="form-control" ng-model="userDetails.selectedtimezone" ng-init="selecttimezonelist = timezones[0]">
<option ng-repeat="selecttimezonelist in timezones" ng-selected="userDetails.selectedtimezone == selecttimezonelist.id" value="{{selecttimezonelist.id}}">{{selecttimezonelist.timezone}}</option>
</select>
And then use css
select option:empty {
display:none
}
Angular will usually auto fill in the first option of a drop down menu with a blank value if it hasn't been initialized to a value or if you have set it to a value that is not within the list of values it can select from.
You should take a look at what value you are initializing its variable to or, if you haven't yet, initialize the variable to one of the values in the list to select from.
This is code for showing "select a option" in dropdown(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 option</option>
</select>
can anybody explain me what is going on behind this code and what is use of display : none in that?
The ng-options directive is like repeater and it will generate options and it will place them after the one with the disply:none which will be selected initially. Check the documentation for more info.
The idea behind the display:none option is to be hidden when the select is expanded so that you end up with valid selection.
With style="display:none" you wont be able to select 'select a option' from the dropdown list. Other than that your selection will be the value of option option.value but the text too choose from will be the name of option as option.name and each option comes from typeOptions.
I found this fiddle, try and remove the style="display:none" and see what happends, also try and remove the whole <option style="display:none" value="">select a option</option> line
The Angular select directive does this because of a wrinkle and how the select control works in the browser. If the select control initially has a value of "X", but there is no option element with value "X", the browser will automatically choose the first option from the list; without the user actually doing so. This is quite unhelpful, as it both generates a spurious change which Angular would then detect, and defeat the likely intention of the "required" setting, which is to require that the human (not the browser, automatically) make a choice.
In your example above, the value is the empty string "", but the same idea applies.
In the "bad old days" of programming the browser DOM by hand, this was also necessary for the same reasons.
I use AngularJS and bind a <select> to my model:
<select ng-model="model.something" ng-options="..." >
<option></option>
</select>
It leaves one empty element on top of dropdown, and then generates other options from my view-model.
These things work great:
1. I choose option from dropdown, it is bound to model.something.
2. I choose empty option, model.something is set to null.
3. I set model.something in another function, the correct option is selected.
What does not work:
- I set model.someting to null in another function, empty option is not selected, the previous value is still selected.
How to "tell" Angular to select empty option, if I bind model to null value?
Change <option></option> to <option value=""></option> and set model.someting to empty string "".
UPDATE
Here is a working JSFiddle:
http://jsfiddle.net/DianaNassar/6kLW6/
I am new to Angular, I have the following code:
<select id="selectUser" class="form-control" ng-change="selectAction()" ng-model="users"
ng-options="value.SignOnId as value.UserName for value in users">
<option value="">Select a User</option>
</select>
As soon as I select a value from the drop down, it executes the selectAction() method and then all values from the drop down disappear, can anybody tell me what's the reason?
change this: ng-model="users" to ng-model="user"
When you select the user, you are setting the users variable to be the selected user, which means your ng-options no-longer has options in it.
I have a <select> element with an ng-model=sendTime element to select a time from the list. This list contains only a limited number of standard times, but as a last item it always contains an option for the sendTime in the model:
<select ng-model="sendTime" style="">
<option value="now">now</option>
<option value="08:00">08:00</option>
<option value="17:00">17:00</option>
<option value="{{sendTime}}">{{sendTime}}</option>
</select>
The last item is just to ensure that a custom time (which is not editable in this view) will appear in the selection box. The problem is that Angular doesn't do this correctly. It adds the final element to the list, but it doesn't select it. It only ever selects one of the default times.
How can I fix this?
Change the last option to <option ng-value="sendTime">{{sendTime}}</option>. The behavior will be abit weird though. When you select an other option the value of the last option will change to the selected option. If you don't want this behavior you could do something like this:
<select ng-model="sendTime" style="" ng-init="default=sendTime">
<option value="now">now</option>
<option value="08:00">08:00</option>
<option value="17:00">17:00</option>
<option ng-value="default">{{default}}</option>
</select>
See: http://plnkr.co/edit/YhEgbDSxkE6nYy0FaRVF?p=preview