本文主要給大家介紹了Angular2中select用法之設(shè)置默認(rèn)值與事件的相關(guān)內(nèi)容，分享出來(lái)供大家參考學(xué)習(xí)，下面來(lái)看看詳細(xì)的介紹：

一、設(shè)置默認(rèn)值：

現(xiàn)在有三個(gè)學(xué)生小明，小紅，小黑，對(duì)雙向綁定的student設(shè)置你想要的select值就可以在下拉框默認(rèn)選中

code1：

設(shè)置”請(qǐng)選擇”為默認(rèn)項(xiàng)，只需要把變量student設(shè)置為‘'，即可默認(rèn)到“請(qǐng)選擇”，需要注意的是

<option value="">請(qǐng)選擇</option>使用的是value（這是HTML原生的屬性）

<option *ngFor="let item of students" [value]='item'>{{item}}</option>使用的是[value]（在ng2中使用ngFor時(shí)，value需要用ng2的語(yǔ)法，即[value]）

let students:string[]=['xiaoming','xiaohong','xiaohei'];
 let student:string='';
 let info:string='';
 <select [(ngModel)]="student">
 <option *ngFor="let item of students" [value]='item'>{{item}}</option> 
 </select>

code2：

當(dāng)需要設(shè)置默認(rèn)值到xiaoming時(shí)，只需要將變量student的初始值設(shè)為“xiaoming”

let students:string[]=['xiaoming','xiaohong','xiaohei'];
 let student:string='xiaoming';
 let info:string='';
 <select [(ngModel)]="student">
 <option *ngFor="let item of students" [value]='item'>{{item}}</option> 
 </select>

二、綁定事件

select下拉框主要通過(guò)ngModel和ngModelChange實(shí)現(xiàn)選擇事件

如果你想要在select下拉框選中某一項(xiàng)時(shí)觸發(fā)事件，可以將[(ngModel)]拆成ngModel和ngModelChange來(lái)實(shí)現(xiàn)

let students:string[]=['xiaoming','xiaohong','xiaohei'];
let student:string='';
let info:string='';
setInfo(){
 this.info=student;
}
<select [ngModel]="student" (ngModelChange)="student=$event;setInfo()">
 <option value="">請(qǐng)選擇</option>
 <option *ngFor="let item of students" [value]='item'>{{item}}</option> 
</select>
{{info}}

在屬性綁定中，一個(gè)值從模型中傳到屏幕上的目標(biāo)屬性。 我們通過(guò)把名字括在方括號(hào)中來(lái)標(biāo)記出目標(biāo)屬性， [] 。 這是一個(gè) 從模型到視圖 的單向數(shù)據(jù)綁定。

在事件綁定中，值從屏幕上的目標(biāo)屬性傳到模型中。 我們通過(guò)把名字括在圓括號(hào)中來(lái)標(biāo)記出目標(biāo)屬性， () 。 這是一個(gè) 從視圖到模型 的反向單向數(shù)據(jù)綁定。

在Angular2中[(x)] 的綁定目標(biāo)時(shí)，會(huì)以x和xChange表示他的輸入和輸出屬性。

代碼中student=$event 原理如下ngModelChange是一個(gè) Angular EventEmitter 類(lèi)型的屬性，當(dāng)它觸發(fā)時(shí)，它返回的是輸入框的值

需要注意的是：目前select下拉框中不支持綁定json對(duì)象

更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題：《AngularJS指令操作技巧總結(jié)》、《AngularJS入門(mén)與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家學(xué)習(xí)或者使用Angular.js能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。