Angular 14: <select> displays incorrect value when updating data - javascript

I use [ngModel] to assign the currently selected option to a dropdown menu, and when the page is loaded initially this works fine, but sometimes when updating the data while the page is still loaded, the dropdown displays an incorrect value, but the model itself is still correct.
<select *ngIf="effect.type == ruleEffects.ApplyTemplate" class="form-select"
[disabled]="readOnly" [ngModel]="effect.impact"
(ngModelChange)="updateImpact($event, j)">
<option *ngFor="let template of templates" [value]="template.TemplateName">
{{template.TemplateName}}
</option>
</select>
Verifying {{effect.impact}} shows that the correct template is currently selected, but the dropdown box will still list an incorrect value.
How can I fix this problem?

Can you try something like this?
<select *ngIf="effect.type == ruleEffects.ApplyTemplate" class="form-select"
[disabled]="readOnly" [(ngModel)]="effect.impact">
<option *ngFor="let template of templates" [value]="template.TemplateName">
{{template.TemplateName}}
</option>
</select>

Did you try using [ngValue] instead of [value]?
<select *ngIf="effect.type == ruleEffects.ApplyTemplate" class="form-select"
[disabled]="readOnly" [(ngModel)]="effect.impact">
<option *ngFor="let template of templates" [ngValue]="template.TemplateName">
{{template.TemplateName}}
</option>
</select>

Related

How to write condition in JavaScript ternary

I have a select and options in my form but i would like to prepopulate the select with old selected data but i can't seem to get it to work.
Here is my code
<select name="holding_id" v-model="service.holding_id">
<option value="">Select a holding group</option>
<option v-for="holding in holdings" v-bind:key="holding.id" v-bind:value="holding.id">
{{ holding.holding_name }}
</option>
</select>
I am thinking using javascript ternary would make sense

Angular Select Adding undefined option

I have this tempScale object defined in my controller:
$scope.tempScale = {
scaleType : [],
deviations : [],
intervals : 0
};
Which connects to my html:
<select id="scales" ng-model="tempScale.scaleType" class="form-control">
<option value="Manually Calculated" ng-selected="true">Manually Calculated</option>
<option value="Automatically Calculated">Automatically Calculated</option>
</select>
I added in the ng-selected=true so that manually calculated would be the first and selected option (basically a default option 1), however, when I run the page, my HTML looks like:
<select id="scales" ng-model="tempScale.scaleType" class="form-control ng-valid ng-dirty ng-touched">
<option value="? undefined:undefined ?"></option>
<option value="Manually Calculated" ng-selected="true" selected="selected">Manually Calculated</option>
<option value="Automatically Calculated">Automatically Calculated</option>
</select>
Why are those ng classes appearing on load, and where is this undefined option value coming from? It's not a loop, so I'm baffled.
You do not need ng-selected. Set the model from the controller as $scope.tempScale.scaleType='Manually Calculated';.
One cannot set a default selected item when using ng-model directive with select element. The select element is bind to model field, which data is undefined. What value select should display? Yes, undefined. You try to pass data via markup, it is not an Angular way.
Just keep your data in JS model, not in HTML markup.[Ref]
Plunker demo

Angular select and constants: how to select default option?

I've got a select element, like this:
<select id="fieldName"
class="form-control"
ng-model="condition.type">
<option value="{{constants.TYPE_SORT_BY_SENDER}}">
{{locale('Sender')}}
</option>
<option value="{{constants.TYPE_SORT_BY_RECIPIENT}}">
{{locale('Receiver')}}
</option>
<option value="{{constants.TYPE_SORT_BY_DATE}}">
{{locale('Date')}}
</option>
<option value="{{constants.TYPE_SORT_BY_ATTACHMENT}}">
{{locale('Has attachment')}}
</option>
<option value="{{constants.TYPE_SORT_BY_SUBJECT}}">
{{locale('Subject')}}
</option>
</select>
constants object is defined in $rootScope on $stateChangeStart event, so when I look on this element using firebug it looks ok.
But the problem is that this select is not selecting the correct option on page load: if I change a constant to the number it works fine.
I don't want to have any magic numbers in my template, but I can't get this select to work.
What should I do here?

Prevent Blank Select in Angular

I updating a form to angular. The selects in it are not generated by angular. I am using angular to add some interactivity and submit the form. I am having an issue where angular is adding a blank select to the element. Is there a way of preventing this without having angular generate the select?
<select name="inventory_status" ng-model="formData.inventory_status">
<option ng-selected="true" ng-value="1">Active</option>
<option ng-value="2">Discontinued</option>
<option ng-value="3">Special Order</option>
<option ng-value="4">Pre-Order</option>
</select>
The above code produces this:
<select name="inventory_status" ng-model="formData.inventory_status" ng-init="sortorder='1'" class="ng-pristine ng-valid ng-touched"><option value="? undefined:undefined ?"></option>
<option ng-selected="true" ng-value="1" value="1" selected="selected">Active</option>
<option ng-value="2" value="2">Discontinued</option>
<option ng-value="3" value="3">Special Order</option>
<option ng-value="4" value="4">Pre-Order</option>
</select>
My hope is to not have this produced:
<option value="? undefined:undefined ?"></option>
Additionally I would like to not have to use angular to generate the dropdown although if that is the only option I could. This only happens when I set this field to ng-model. I am setting it to ng-model because I want to use angular to submit the form.
Thanks in advance.
Set $scope.formData.inventory_status = 1 or whatever value you want selected and it will not show the empty option, plus you don't need ng-selected if you set the value.

AngularJS - Changing text of default option inside ngOptions

I have a select menu using ng-options to repeat the options, and I have a default <option> inside the menu:
<select ng-model="selected" ng-options="d.id as d.value for d in data">
<option value="">Choose an option</option>
</select>
Problem: I want to make it so that the text inside that default option changes based off another property in the $scope, and I tried the following and it doesn't work:
<select ng-model="selected" ng-options="d.id as d.value for d in data">
<option value="" ng-if="!optional">Choose an option</option>
<option value="" ng-if="optional">Choose an option (optional)</option>
</select>
It seems it will only show one default <option> element, so I also tried the following with ng-show but it doesn't work either:
<select ng-model="selected" ng-options="d.id as d.value for d in data">
<option value="">Choose an option <span ng-show="optional">(optional)</span></option>
</select>
I know you can also do <option ng-repeat> inside the select menu, but the data for the options comes from an AJAX call and doesn't update correctly when the data first comes in, so I'm sticking to using <select ng-options>.
Here's a JSFiddle with the problem.
Any suggestions for how I could go about getting this to work?
Your first try didn't work because, as said by the documentation of select in AngularJS, only "a single hard-coded <option> element can be nested into the <select> element".
Your second try didn't work because the <option> element can only receive "text (with eventually escaped characters like é)" as content, and not any tag like the <span> you've tried.
The solution is simply to use interpolation:
<select ng-model="selected" ng-options="d.id as d.value for d in data">
<option value="">Choose an option {{optional ? '(optional)' : ''}}</option>
</select>
Have you tried setting the text with template markup?
<select ng-model="selected" ng-options="d.id as d.value for d in data">
<option value="">{{defaultOptionText}}</option>
</select>
Working at this jsfiddle: http://jsfiddle.net/udu9byka/2/

Categories

Resources