I have a drop down list and it has two values. if user didn't select none of the value it should set a default value.
<select class="form-control" ng-model="abc.code" required>
<option ng-repeat="x in codeList" value="{{x}}" ng-selected="codeList[1]" >
{{x}} </option>
</select>
Can someone help me.
you can add something like this
<option value="didnt select" selected hidden>please select one option</option>
for default value statically in your select input
Related
I have a select drop down. I have to show " select" as the default value. After selection an option, the value shown should be selected value.
<select #selectedPlanet
(change)='onOptionsSelected(selectedPlanet.value)'>
<option selected hidden>Select</option>
<option *ngFor='let planet of planetsList' [value]="planet.name">{{planet.name}}</option>
</select>
</div>
But now what happens is that, it shows "select" as default. But on selecting an option, the changed option changes to "select" in UI.Could anyone please help me
<select #selectedPlanet (change)='onOptionsSelected($event.target.value)'>
<option value="0" selected>Select</option>
<option *ngFor="let planet of planetsList let i=index" value="{{planet.name}}">{{planet.name}}</option>
</select>
With regular html select menus, if you create an option element with selected and disabled attributes and give that option text, then that text will display in the select menu by default. Here is basic html:
<select name="myname">
<option selected disabled>Select one...</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
This is what pages looks like:
But in the below isolated code, I demonstrate that Angular is intrusively not showing the option text:
https://github.com/lovefamilychildrenhappiness/DropDownNoShowDefaultValue
// app.component.html
<h1>Select Box does not show default value: </h1>
<app-select-box
[options]="collection"
></app-select-box>
// select-box.component.html
<select
[value]="value"
[disabled]="disabled">
<option selected disabled value="">Select one...</option>
<option *ngFor="let option of options">{{option}}</option>
</select>
What is causing Angular to disrupt the native html behavior of select boxes?
This is because your select value is bound to a variable called value which is undefined initially. As per the html, there is no option with a value of undefined, so nothing gets selected. Your Select one... option has an empty string value. So to fix this, initialize value in your component to an empty string.
value: string = '';
just put the option to be selected in the first place.
<option value="0">value to be selected<option>
<option value="1">next<option>
<option value="2">Continues<option>
I am trying to make a placeholder for an input field that is a drop down list. But somehow it doesn't work.
The following is an example on how to define a placeholder for a drop down list:
<select>
<option value="" disabled selected>Please Select Something</option>
<option value="Foo">Foo</option>
</select>
I´m having an issue with to select a default value on a select with Angular.
If my select options only has one value it´s ok and works fine
<select id="customerId"
ng-model="customer"
ng-options="customer.id for customer in customersSelect">
</select>
In my angular js:
$scope.customer = customer;
But if I try with multiple elements on ng-options and I set the default option, is not working
<select id="customerId"
ng-model="customer"
ng-options="customer.id as customer.name for customer in customersSelect">
</select>
Any ideas?
You can use a option tag.like below:
<select
id="customerId"
ng-model="customer"
ng-options="customer.id as customer.name for customer in customersSelect">
<option value="">PLease select one</option>
</select>
Thats it.
I have a select that uses ng-options to populate the select as follows:
<select class="form-control"
ng-model="Data.selectedPerson"
ng-options="v as (v.Name ) for v in Data.people track by v.Name">
</select>
I don't want to add a value to the collection for a default if the people collection is empty or no value is selected yet. I would like to have a prompt in the select to encourage them to use the select. Thanks for your suggestions.
Just add a default option, just so angular will use this option when there is nothing selected in the ngModel or an invalid item is populated in the model. This way you don't need to add an empty value in your collection.
<select class="form-control"
ng-model="Data.selectedPerson"
ng-options="v as v.Name for v in Data.people track by v.Name">
<!-- Add your default option here -->
<option value="">Please select a person</option>
</select>
You could also change the text based on the condition:-
<option value="">{{ Data.people.length ? "Please select a person" : "No one available for selection" }}</option>
You can also remove it from DOM if it has already a selected value.
<option ng-if="!Data.selectedPerson" value="">Please select a person</option>