I have to show the user name which is saved in db as selected in drop down.
<select name="field_user" id="field_user" class="txt_box sel_box" ng-model="field_user_select" >
<option value="" disabled selected>Select Field User</option>
<option ng-repeat="user in field_user_list" value="{{user._id}}" ng-selected="current_user._id">{{user.owner_name}}</option>
</select>
How to do that?
NgSelected waits for an expression. If it's true, it puts the selected attribute to the option. So you'll need to do something like:
<option ng-repeat="user in field_user_list" value="{{user._id}}" ng-selected="user._id === current_user._id">{{user.owner_name}}</option>
Related
here my code
<select class="form-control"
aria-placeholder="select auth type" id="auth_type"
[(ngModel)]="authenticationType"
name="auth_type"
#auth_type="ngModel"
(change)="changeAuthenticationType($event)" required>
<option [ngValue]="undefined" disabled selected>{{'AUTHENTICATION_CONFIGURATION.SELECT_TYPE' | translate}}
</option>
<option value="ALIGNOR_AUTHENTICATION">ALIGNOR AUTHENTICATION</option>
<option value="COGNITO_AUTHENTICATION">COGNITO AUTHENTICATION</option>
</select>
You have not done it by the recommended way of doing it.
Refer this demo code to see how it done. I would recommend to do it this way.
<select [(ngModel)]="selectedItem">
<option *ngFor="let item of items" [ngValue]="item">{{item.value}}</option>
</select>
You can make changes in your code accordingly.
I am working on a form which have multiple select fields with multiple options. But only one select field is displayed while the other is hidden with display: none.
The issue right now is, I am getting the value for both the fields even though one is hidden.
Here's my two select input fields where only one is visible according to the user's choice.
<select id="entry" name="entry">
<option value="slide-in-center" >Center</option>
<option value="slide-in-right">Right</option>
</select>
<select id="exit" name="exit" style="display: none;" >
<option value="slide-out-center" >Center</option>
<option value="slide-out-right">Right</option>
</select>
After the form is submitted I get output from both the fields. Like:
{
entry: 'slide-in-center',
exit: 'slide-out-center'
}
Why am I getting this? I had selected attribute in the first option for both. And I thought it is because of this so I removed this but it is giving out the same output. What am I doing wrong here?
The select, even with display set to none will still be submitted as part of the form. I believe it used to be enough to prevent it from being submitted, but it changed.
Adding the disabled attribute to your select will prevent it from being submitted with the form.
the default value is the first option. add a blank option
var entry = document.getElementById('entry').value
console.log(entry)
var exit = document.getElementById('exit').value
console.log(exit)
var entry2 = document.getElementById('entry2').value
console.log(entry2)
var exit2 = document.getElementById('exit2').value
console.log(exit2)
<select id="entry" name="entry">
<option value="slide-in-center" >Center</option>
<option value="slide-in-right">Right</option>
</select>
<select id="exit" name="exit" style="display: none;" >
<option value="slide-out-center" >Center</option>
<option value="slide-out-right">Right</option>
</select>
<select id="entry2" name="entry">
<option value=''></option>
<option value="slide-in-center" >Center</option>
<option value="slide-in-right">Right</option>
</select>
<select id="exit2" name="exit" style="display: none;" >
<option value=''></option>
<option value="slide-out-center" >Center</option>
<option value="slide-out-right">Right</option>
</select>
Here I want to get a project from database to edit or change its properties for ex. destination country.
when the project is loaded the select element should be already selected same as the project.DestinationCountry. Then I may change this property if needed.
<select type="text" class="form-control" id="Destination" value="#project.DestinationCountry">
<option value="Canada">Canada</option>
<option value="Sweden">Sweden</option>
<option value="Switzerland">Switzerland</option>
</select>
I tried to use value="#project.DestinationCountry" within select element but it did not work.
Here is c# code
private ProjectModel project;
protected override void OnInitialized()
{
project = _db.GetProject<ProjectModel>(id);
}
This won't work since you can't add a value to the select element.
<select type="text" class="form-control" id="Destination" value="#project.DestinationCountry">
<option value="Canada">Canada</option>
<option value="Sweden">Sweden</option>
<option value="Switzerland">Switzerland</option>
</select>
However, to make an option selected by default you need to use the selected attribute on option. To make sure the select element shows the fetched value from database, the best bet would be to use conditionals. If project.DestinationCountry matches the value add the selected attribute.
<select type="text" class="form-control" id="Destination">
<option value="Canada" selected>Canada</option>
<option value="Sweden">Sweden</option>
<option value="Switzerland">Switzerland</option>
</select>
You can achieve this using conditional attributes
<select type="text" class="form-control" id="Destination">
<option value="Canada" selected="#(project.DestinationCountry == "Canada")">Canada</option>
<option value="Sweden" selected="#(project.DestinationCountry == "Sweden")">Sweden</option>
<option value="Switzerland" selected="#(project.DestinationCountry == "Switzerland")">Switzerland</option>
</select>
This checks whether the condition matches. If true then the value assigned is same as the attribute name thus resulting in selected="selected". When the value is false the attribute won't render at all. Or better use a for loop to output the options and for each entry you can check whether it's the current value and then add selected attribute to it to it.
I did like this and it worked but I want to know if there is smarter solution for that.
<select type="text" class="form-control" id="Destination">
<option value="">Select a country</option>
#foreach (var country in Countries)
{
if (project.DestinationCountry != null)
{
<option value="#country" selected=#(project.DestinationCountry.ToLower() ==
country.ToString().ToLower())>#country</option>
}
else
{
<option value="#country">#country</option>
}
}
</select>
I am working on angular 9 and whenever list on which select it working is changed it selects first element by default. I am using materializecss for this. I tried jquery and compareWith but no use.
<select id="valueSelect"
data-[(ngModel)]="selectedValue"
[compareWith]="compareList"
data-(change)="fetchMetaData();">
<option value="" disabled selected>Choose value</option>
<option data-*ngFor="let element1 of filterList"
data-[ngValue]="bu.businessunitCode">{{element1.value}}</option>
</select>
<label>Select value</label>
may i show fetchMetaData() function ?
replace [ngValue] to [value] may be it will work fine !
<select id="valueSelect"
[(ngModel)]="selectedValue"
[compareWith]="compareList"
(change)="fetchMetaData();">
<option selected disabled>Choose value</option>
<option *ngFor="let data of fadeIn" [value]="data">{{data}}</option>
</select>
I want to be able to disable and re-enable a <select> on a certain condition with EL, much like this example. In the example, the list From will be disabled if you haven't chosen any City yet. I know how to disable a <select> from this question, but how to re-enable them ?
This is my code so far, as you can see the monthcmb will be disabled if yearcmb's value is 'Select year' which is default
<SELECT class="drop" name="yearcmb" required >
<option value="">Select year</option>
</SELECT>
<SELECT class="drop" name="monthcmb" required ${(empty yearcmb) ? 'disabled' : ''}>
<option value="">Select month</option>
</SELECT>