Angular2中select用法之設置默認值與事件詳解

更新時間：2017年05月07日 11:25:30 作者：erciyuan_nuonuo

在Angular.JS中可以使用數(shù)組或對象創(chuàng)建一個下拉列表選項。關于Angular.js中select的基礎相信大家應該都已經(jīng)了解了，那么下面這篇文章主要給大家介紹了Angular2中select用法之設置默認值與事件的相關資料，需要的朋友可以參考借鑒，下面來一起看看吧。

本文主要給大家介紹了Angular2中select用法之設置默認值與事件的相關內容，分享出來供大家參考學習，下面來看看詳細的介紹：

一、設置默認值：

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

code1：

設置”請選擇”為默認項，只需要把變量student設置為‘'，即可默認到“請選擇”，需要注意的是

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

<option *ngFor="let item of students" [value]='item'>{{item}}</option>使用的是[value]（在ng2中使用ngFor時，value需要用ng2的語法，即[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：

當需要設置默認值到xiaoming時，只需要將變量student的初始值設為“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下拉框主要通過ngModel和ngModelChange實現(xiàn)選擇事件

如果你想要在select下拉框選中某一項時觸發(fā)事件，可以將[(ngModel)]拆成ngModel和ngModelChange來實現(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="">請選擇</option>
 <option *ngFor="let item of students" [value]='item'>{{item}}</option> 
</select>
{{info}}

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

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

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

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

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

更多關于AngularJS相關內容感興趣的讀者可查看本站專題：《AngularJS指令操作技巧總結》、《AngularJS入門與進階教程》及《AngularJS MVC架構總結》

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家學習或者使用Angular.js能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。

您可能感興趣的文章: