一、引入模块

  1. import {FormsModule} from "@angular/forms";

二、js中定义绑定数据

  1. public user:any={
  2.     username:'',
  3.     sex:'1',
  4.     cityList:['北京','上海','深圳'],
  5.     city:'北京',
  7.     hobby:[
  8.       {
  9.         title:'吃饭',
  10.         checked:false
  11.       },
  12.       {
  13.         title:'睡觉',
  14.         checked:false
  15.       },
  16.       {
  17.         title:'敲代码',
  18.         checked:false
  19.       }
  20.     ],
  21.     text:''
  22.   }

三、html页面中绑定

  1. <ul>
  2.   <li>
  3.     <input type="text" [(ngModel)]="user.username">
  4.   </li>
  5.   <li>
  6.     <input type="radio" [(ngModel)]="user.sex" value="1"> 男
  7.     <input type="radio" [(ngModel)]="user.sex" value="2"> 女
  8.   </li>
  9.   <li>
  10.     <select name="city" id="city" [(ngModel)]="user.city">
  12.       <option *ngFor="let city of user.cityList" [value]="city">{{city}}</option>
  13.     </select>
  14.   </li>
  15.   <li>
  16.     <span *ngFor="let hobby of user.hobby">
  17.       <input type="checkbox" [(ngModel)]="hobby.checked">{{hobby.title}}
  18.     </span>
  19.   </li>
  21.   <li>
  22.     <textarea name="" id="" cols="30" rows="10" [(ngModel)]="user.text"></textarea>
  23.   </li>
  25.   <button (click)="getUser()">获取user</button>
  27.   {{user | json}}
  29. </ul>