Develop Reference

how to save id from one service to another using select in angular

I want to save the id I get from one service in another using select this is my method
<select class="form-control" id="select_fac" [(ngModel)]="rep.idfac">
<option selected disabled>Select the company</option>
<option *ngFor="let fact of factory" [ngValue]="fact.id_fac">{{fact.name}}</option>
</select>
I have this in my component.ts
factory: Factory[]=[];
rep:Representative= new Representative();

Try with ReactiveForms:
Angular Docs: Reactive Forms
You can bind the data with formContralName

Set default selected item in select input using Vue.js

I'm using vue-i18n to handle translations in my software. I'm trying to create a select input to change between languages. To do so, I'm using the following code:
<select class="form-control" v-model="$i18n.locale">
<option v-for="(key,value) in languages" v-bind:key="value" :value="value">
{{key}}
</option>
</select>
I want that my actual language ($i18n.locale) appears as selected in my select input. However, none of the languages is selected, as the following image shows. How can I solve this?

First argument in v-for is the value and second is the key.
Documentation.
So this should work:
<option v-for="(value, key) in languages" :key="key" :value="value">
You have an example in i18n's docs.
Or, since you want to use the values as keys (as they're unique & primitives):
<option v-for="lang in languages" :key="lang" :value="lang">

runtime binding in Angular 4

Hi I'm new developing Angular application. But, I want to bind a html select element option display in runtime take a look to my code. I'm using TypeScript.
I have this class.
export class Gender{
constructor(short:string, long:string){
this.shortName = short;
this.longName = long;
}
shortName:string;
longName:string;
}
That I'm trying to bind like this
<select class="form-control" [(ngModel)]="selectedOption">
<option *ngFor="let opt of options" [ngValue]="opt">
{{opt."DYNAMICALLY INSERT THE NAME OF THE FIELD TO DISPLAY"}}
</option>
</select>
I want to define in runtime which field will be display. Let's say I want to do something like this
<select class="form-control" [(ngModel)]="selectedOption">
<option *ngFor="let opt of options" [ngValue]="opt">
{{opt.WHICHFIELDTODISPLAY}}
</option>
</select>
so in the valriable WHICHFIELDTODISPLAY is the name of the field I want to display let say "longName".
So, how do I bind a dynamic value in a select option element using Angular 4 with TypeScript?

You can try displaying the value placing within [] instead of dot operator
<option *ngFor="let opt of options" [ngValue]="opt">
{{opt[WHICHFIELDTODISPLAY]}}
</option>

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 Kendo Dropdownlist automatically adds blank option

I am using angular kendo and having a strange issue with kendo's dropdownlist control that the field bound with the first dropdown control on the form has by default ? undefined:undefined ? in it. Although the generated html has selected="selected" in first option. When I explicitly select a value in dropdown the model is updated properly.
The dropdown is filled with an array in root scope.
Also noticed that if I enable chrome's extension AngularJS Batarang then it works as well.
I did debugging of angular-kendo and found out that kendo is automatically adding blank option which has value of ? undefined:undefined ?.
<select class="s-select" kendo-drop-down-list k-data-source="lookupCache.getLookupValues('gender')" k-data-text-field="'DisplayName'" k-data-value-field="'Id'" k-value="'M'" ng-model="Model.Gender" />
where Model is {} by default

For dynamic data source you can use data-option-label, like follows:
<select name="packageName" id="packageName"
kendo-drop-down-list
k-options="dropDownListOptions"
k-ng-model="packageSelected"
ng-model="packageTypeId"
data-option-label="{value:'Select...',name:''}"/>

Its a strange issue in the Kendo UI.
My workaround :
Dont give the kendo-drop-down-list tag in the select list. Rather make it kendo by JS function.
HTML :
<select id="searchisActive" ng-model="ngsearchisActive" ng-change="applyFilter()">
<option value="-1">All</option>
<option value="1">Active</option>
<option value="0">Inactive</option>
</select>
JS :
$(function () {
$("#searchisActive").kendoDropDownList();
});