在Angular 2中,将默认值设置为select option
Angular 2, set default value to select option
我尝试为选项添加默认值。它就像一种占位符,我用这个方法来做。在纯HTML中,它可以工作,但如果我尝试使用*ngFor
的angular 2属性,它不会选择任何东西。
<select name="select-html" id="select-html">
<option value="0" selected disabled>Select Language</option>
<option value="1">HTML</option>
<option value="2">PHP</option>
<option value="3">Javascript</option>
</select>
和使用Angular模板:
<select name="select" id="select" [(ngModel)]="selectLanguage">
<option *ngFor="let item of selectOption"
[selected]="item.value==0"
[disabled]="item.value==0">{{item.label}}</option>
</select>
类是
import {Component} from '@angular/core';
@Component({
moduleId: module.id,
selector: 'app-form-select',
templateUrl: 'default.component.html'
})
export class DefaultComponent {
private selectOption: any;
constructor() {
this.selectOption = [
{
id: 1,
label: "Select Language",
value: 0
}, {
id: 2,
label: "HTML 5",
value: 1
}, {
id: 3,
label: "PHP",
value: 2
}, {
id: 4,
label: "Javascript",
value: 3
}
]
}
}
我想选择Select Language
作为默认值。
如何选择它作为默认值?
<生活例子/strong>
update
4.0.0-beta。6添加compareWith
<select [compareWith]="compareFn" [(ngModel)]="selectedCountries">
<option *ngFor="let country of countries" [ngValue]="country">
{{country.name}}
</option>
</select>
compareFn(c1: Country, c2: Country): boolean {
return c1 && c2 ? c1.id === c2.id : c1 === c2;
}
这样分配给selectedCountries
的实例不需要是相同的对象,但是可以传递一个自定义比较函数,例如能够匹配具有相同属性值的不同对象实例。
如果你想使用一个对象作为值,你需要在option元素上使用[ngValue]
。
<select name="select" id="select" [(ngModel)]="selectLanguage">
<option *ngFor="let item of selectOption" [ngValue]="item"
[disabled]="item.value==0">{{item.label}}</option>
</select>
当selectLanguage
有一个指定的选项值时,[(ngModel)]="..."
会默认选择这个选项吗?
import {Component} from '@angular/core';
@Component({
moduleId: module.id,
selector: 'app-form-select',
templateUrl: 'default.component.html'
})
export class DefaultComponent {
private selectOption: any;
constructor() {
this.selectOption = [
{
id: 1,
label: "Select Language",
value: 0
}, {
id: 2,
label: "HTML 5",
value: 1
}, {
id: 3,
label: "PHP",
value: 2
}, {
id: 4,
label: "Javascript",
value: 3
}
];
this.selectLanguage = this.selectOption[0];
}
}
我发现从selectOption
数组中删除默认选项并单独指定默认不可选择选项会更好。
<select name="select" id="select" [(ngModel)]="selectLanguage">
<option [ngValue]="undefined" disabled>Select Language</option>
<option
*ngFor="let item of selectOption"
[value]="item.value"
>
item.label
</option>
</select>
试试下面的示例代码:
将yourValue
替换为您想要选择的任何值default
<select placeholder="country" >
<option *ngFor="let country of countriesList" [ngValue]="country" [selected]="country.country_name == yourValue" >
{{country.country_name}}
</option>
</select>
<select class="form-control" [(ngModel)]="someList.key" name="key" #key="ngModel" required>
<option value="undefined" selected disabled>Select option</option>
<option *ngFor="let data of someList" value="{{data.key}}">{{data.key}</option>
</select>
相关文章:
- 根据路由URL设置select的值
- 如何在不触发更改事件的情况下设置 SELECT 元素的选定选项
- 使用JavaScript设置select标记的选定索引
- 根据json值设置select选项
- 使用jQuery设置Select Dropdown
- 在页面加载时设置select元素选项
- 不能从我的控制器中设置select value, Angular JS
- Knockout:在改变可观察数组后设置select的标题
- 如何在angular中设置select default选项?
- 使用AngularJS的双向数据绑定设置SELECT的默认值
- 如何使用angularjs-json数据设置select 2下拉列表的默认值
- 使用casperjs在表单上设置select
- 用KnockoutJS设置select的初始值
- 可以'当第一个select的值改变时,让jquery设置select输入的值
- 如何为嵌套的Mongoose文档设置select=false
- 如何设置select选项的默认值
- 使用Value属性设置Select的默认值
- 使用jQuery设置select后,无法使用jQuery获取select的选定值
- 如何在异步调用中使用敲除和typescript设置select的值
- 如何设置select语句的值