Detailed explanation of the use of select in Angular2: Set default values and events

This article mainly introduces the content related to setting default values and events in Angular2. It is shared for your reference and learning. Let’s take a look at the detailed introduction below:

1. Set the default value:

There are now three students, Xiao Ming, Xiao Hong and Xiao Hei. You can select the select value you want for the two-way bound student. You can select the default in the drop-down box.

code1：

Set "Please select" as the default item. Just set the variable student to "', and you can default to "Please select". What you need to pay attention to is

<option value="">Please select </option> to use value (this is an HTML native property)

<option *ngFor="let item of students" [value]='item'>{{item}}</option>[value] is used (when using ngFor in ng2, value requires the syntax of ng2, i.e. [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：

When you need to set the default value to xiaoming, you only need to set the initial value of the variable student to "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>

2. Binding events

Select drop-down box mainly implements selection events through ngModel and ngModelChange

If you want to trigger an event when an item is selected in the select drop-down box, you can split [(ngModel)] into ngModel and ngModelChange to achieve

let students:string[]=['xiaoming','xiaohong','xiaohei'];
let student:string='';
let info:string='';
setInfo(){
 =student;
}
&lt;select [ngModel]="student" (ngModelChange)="student=$event;setInfo()"&gt;
 &lt;option value=""&gt;Please select&lt;/option&gt;
 &lt;option *ngFor="let item of students" [value]='item'&gt;{{item}}&lt;/option&gt; 
&lt;/select&gt;
{{info}}

In property binding, a value is passed from the model to the target property on the screen. We mark the target attribute by enclosing the name in square brackets, [] . This is a one-way data binding from the model to the view.

In event binding, values are passed from the target attribute on the screen to the model. We mark the target attribute by enclosing the name in parentheses, (). This is a reverse one-way data binding from view to model.

When the target of [(x)] in Angular2 is bound to the target, its input and output properties will be represented by x and xChange.

In codestudent=$event The principle is as follows: ngModelChange is an Angular EventEmitter property. When it is triggered, it returns the value of the input box.

What should be noted is:Currently, the select drop-down box does not support binding json objects

For more information about AngularJS, readers who are interested in view the topic of this site:Summary of AngularJS command operation skills》、《AngularJS Introduction and Advanced Tutorial"and"AngularJS MVC architecture summary》

Summarize

The above is the entire content of this article. I hope that the content of this article will be of some help to everyone’s learning or use. If you have any questions, you can leave a message to communicate. Thank you for your support.

Detailed explanation of the use of select in Angular2: Set default values ​​and events

Detailed explanation of the use of select in Angular2: Set default values and events