Home>

First, set the default value:

There are three students, Xiao Ming,Little red, little black, set the desired select value for the two-way bound student, which can be selected by default in the drop-down box

code1:

Set "Please select" as the default item,Just set the variable student to "" and it will default to "Please select". Note that

<option value=""> Please select</option>using value (this is a html native attribute)

<option * ngfor="let item of students" [value]="item">{{item}}</option> uses [value] (when using ngfor in ng2, the value needs to use the ng2 syntax, [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>

Second, the binding event

The select drop-down box mainly implements the selection event through ngmodel and ngmodelchange

If i want to trigger an event when an item is selected in the select drop-down box,Can be achieved by splitting [(ngmodel)] into ngmodel and ngmodelchange

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="">Please select</option>
 <option * ngfor="let item of students" [value]="item">{{item}}</option>
</select>
{{info}}

In property binding,A value is passed from the model to the target attribute 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,The 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 the view to the model.

When binding the target of [(x)] in angular2,Its input and output attributes are represented by x and xchange.

student=$event The principle is as follows ngmodelchange is an angular eventemitter type attribute,When it fires,It returns the value of the input box

have to be aware of is:Currently the select drop-down box does not support binding json objects

to sum up

  • Previous Detailed explanation of json interactive use in SpringMVC tutorial
  • Next Four methods for Oracle to connect to a remote database