I have a page where I need to set the option in a dropdown to a value from my model. I am trying to populate the existing selected option (made when the record was created).
<select name="assemblyOptions"
ng-model="model.edit.assembly"
ng-options="option as option.name for option in assemblyOptions">
</select>
This is how the code looked when I created the record. "assemblyOptions" is an object in scope that has the options to display.
When one is selected it is written to the $scope.model.edit.assembly of which "name" is the item displayed (hence "option as option.name for" ...).
Now, I am on a different page and I have the model data including the model.edit.assembly object.
I want the dropdown to be set to the value in the model.
I have tried using the ng-selected directive but can't get the syntax right.
Any possible solutions?
You can use track by to make the options unique
<select name="assemblyOptions"
ng-model="model.edit.assembly"
ng-options="option as option.name for option in assemblyOptions track by option.name">
</select>
Related
I am trying to dynamically set FormControlNames for select lists in a Reactive form but instead of formControlName, I'm getting ng-reflect-name.
My html code is as follows and I set the formControlName and ID on my select lists to the same value just for confirmation:
<div *ngFor="let questionOption of questionOptions; let i = index">
<select [id]="questionOption['control']" [formControlName]="questionOption['control']">
<option *ngFor="let option of questionOption['options']"> {{ option }} </option>
</select>
</div>
And this image shows ng-reflect-name being output inplace of the expected formControlName:
What can I try to resolve this?
UPDATE:
I have also found that my select lists do not reflect my selected option.
All my options are visible when I click on my list, I select my desired option but the displayed option remains unchanged.
However, when the form is submitted my console output displays my selected option.
The following image shows 2 select lists on the right which I had selected different options and submitted the form.
The console output on the left show the selected and submitted values.
I have a model containing users, I want to make a dropdown list with these users' UserName as display and their IDs as values, but it is not working. Whichever user I choose from the dropdown list, when I proceed, the chosen value seems to be the Id of the current user, no matter which I choose.
When replacing this select with an input box the other part which uses the user Id works just fine. It seems as all value attributes for the options become the current user's Id instead of the chosen ones.
I've tried injecting javascript, I've tried changing the value=Item.Id for other things, nothing so far has worked. The dropdown list does become populated, but the value attribute seems to be off somehow.
<select asp-for="Input.UserID" onfocus="this.select()">
#foreach (var item in Model.Users)
{
<option value=Item.Id>#Html.DisplayFor(modelItem => item.UserName)</option>
}
</select>
The webpage always throws an error stating that the chosen User ID is the one of the currently logged in user.
You aren't setting the value="" attribute of the <option> element correctly. You also don't need to use DisplayFor for a string value.
<select asp-for="Input.UserID">
#foreach( var item in this.Model.Users ) {
<option value="#(item.Id)">#(item.UserName)</option>
}
</select>
That said, consider using this instead:
<select asp-for="Input.UserID" asp-items="#this.Model.UsersOptions"></select>
You'll need to add a List<SelectListItem> UsersOptions to your ViewModel for this to work.
I have a multi select dropdown. What I need to do is when the user lands on the page, I need to restrict him to modify his previous selections, basically disable those options inside dropdown. Here is the html -
<div>
<select multiple class="form-control selectpicker" ng-model="selectedNames" data-live-search="true" ng-options="opt.name for opt in availableNames track by opt.id" ng-change="onNameChange()"> </select>
</div>
Tried suggestions link - http://silviomoreto.github.io/bootstrap-select/
But if you add an option tag manually when you are using ng-options, it just doesn't get displayed. So tried using ng-repeat rather than ng-options but with ng-repeat my dropdown stopped showing tick-marks against previously selected values & by default displayed - "No values selected", though the model still had them.
Any pointers how to achieve this without resorting to jquery ?
Thanks
Anup
Use disable when syntax in ngOptions. Refer to the ngOptions docs for more details. Add a key in your ngOptions to indicate if the field was previously selected by user for eg. prevSelected: true and tell ngOptions to disable an option when this key is set/exists.
<select ng-model="myColor" ng-options="color.name disable when color.prevSelected for color in colors"></select>
Example on plnkr
I have a select box.
When no value is selected, I have the empty option --. It's OK !
Once an option is selected, the empty option disappears.
But I would like that it is always there to have the opportunity to choose --.
Is it possible ?
<select ng-model="project" ng-options="act.id as act.name for act in actors"></select>
please see here:http://plnkr.co/edit/SWpRZA1dafNNva70z6KE?p=preview
<select ng-model="project" ng-options="act.id as act.name for act in actors">
<option value="">--<option>
</select>
ng-options gets priority when any option is selected from .
As per the standard html can contain . Thus the mentioned option gets priority as the selection is null.
And in view, html priority is higher, thus always value is seen unless the ng-option value already selected from controller.
I hope there's a way to achieve this.
I am creating dropdowns using ng-repeat; the number of dropdowns created depends on the data I retrieve from the database.
Depending on the data,I'd like to set an initial option value for each dropdown.
Consider the following code:
<span class="finds" ng-model="cond" ng-repeat="condin list">
<select ng-model="selected_item" ng-options="condition.name for condition in conditionTypes"></select>
<input ng-model="cond.name"/>
</span>
I can change the values of the dropdown by changing the selected_item value but this changes the value of all dropdowns (because the variable is binded).
So is it possible for me to change the value of each dropdown independently without affecting other dropdowns(without creating multiple variables as well)?
Thank you
If you want your right drop-down to be filled with appropriate data according to the value in your first select box you should be doing something like this.
Suppose you have two drop-down list like;
<select ng-model="first" class="form-control" ng-change="secondcall()">
<option ng-repeat = "firstdata in firstdatas" value="{{firstdata}}">{{firstdata}}</option>
</select>
<select ng-model="second" class="form-control">
<option ng-repeat = "seconddata in seconddatas" value="{{seconddata}}">{{seconddata}}</option>
</select>
In your controller;
$scope.secondcall = function () {
var value = $scope.first;
//Make an API call to fetch details with the select value and in the success do this
$scope.seconddatas = data from the api;
};
There's only one ng-repeat and that is used to create a set of dropdowns.
I need to retrieve the data from the database and depending on the data I can then define how many dropdowns I will need.
the ng-repeat does that. if, after processing the data I need 2 dropdowns then I'll create two pairs inside the loop
dropdown1 dropdwon1.0 {1.0 should load list depending on the option chosen in 1
dropdown2 dropdown2.0 {2.0 should load list depending on the option chosen in 2