Angular双向数据绑定

一，引入模块

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

二，js中定义绑定数据

public user:any= {
    username: '' ,
    sex: '1' ,
    cityList:[ '北京','上海','深圳' ],
    city: '北京' ,

    hobby:[
      {
        title: '吃饭' ,
        checked:  false  
      },
      {
        title: '睡觉' ,
        checked:  false  
      },
      {
        title: '敲代码' ,
        checked:  false  
      }
    ],
    text: '' 
  } 

三，html页面绑定

 <  ul  > 
   <  li  > 
     <  input   type  ="text"   [(ngModel)]  ="user.username"  > 
   </  li  > 
   <  li  > 
     <  input   type  ="radio"   [(ngModel)]  ="user.sex"   value  ="1"  >   男
      <  input   type  ="radio"   [(ngModel)]  ="user.sex"   value  ="2"  >   女
    </  li  > 
   <  li  > 
     <  select   name  ="city"   id  ="city"   [(ngModel)]  ="user.city"  > 

       <  option   *ngFor  ="let city of user.cityList"   [value]  ="city"  > {{city}} </  option  > 
     </  select  > 
   </  li  > 
   <  li  > 
     <  span   *ngFor  ="let hobby of user.hobby"  > 
       <  input   type  ="checkbox"   [(ngModel)]  ="hobby.checked"  >  {{hobby.title}}
      </  span  > 
   </  li  > 

   <  li  > 
     <  textarea   name  =""   id  =""   cols  ="30"   rows  ="10"   [(ngModel)]  ="user.text"  ></  textarea  > 
   </  li  > 

   <  button   (click)  ="getUser()"  > 获取user </  button  >  

  {{user | json}}

  </  ul  > 

 

查看更多关于Angular双向数据绑定的详细内容...