angular双向绑定（表单input、checkbox、radio、select）

目录

一、dom操作实现input绑定

二、双向绑定

三、radio双向绑定

四、select双向绑定

五、checkbox双向绑定

---

一、dom操作实现input绑定

前端声明一个事件

<li>
  姓名：<input type='text' id="username" />
</li>

后端使用原生方法进行调用

 dosubmit(){
    //使用jQuery原生操作
    let nameDom:any=document.getElementById('username');
    console.log(nameDom.value);
  }

二、双向绑定

双向绑定前一定要先在module里面引入模块

[]中括号表示绑定属性，()括号表示绑定事件

 <li>
     姓名：<input type='text' id="username" [(ngModel)]='peopleInfo.username'/>
 </li>

后端

 public peopleInfo:any={
    username:'2'
｝

这样就实现了双向绑定，绑定的原理是：页面刚加载出来的值是后端里的，但是如果进行更改值，新的值就会赋值给后端。这就是双向绑定。

三、radio双向绑定

下面是设置的性别选择框：

 <li>性别：
        <input type='radio' value='1' name='sex' id='sex1' [(ngModel)]="peopleInfo.sex"/> <label for='sex1'>男</label>
        <input type='radio' value='2' name='sex' id='sex2' [(ngModel)]="peopleInfo.sex"/> <label for='sex2'>女</label>
 </li>

对其也实现双向绑定

前端

<input type='radio' value='2' name='sex' id='sex2' [(ngModel)]="peopleInfo.sex"/> <label for='sex2'>女</label>

后端声明一下：

 public peopleInfo:any={
    sex:'2'
｝

四、select双向绑定

对select实现双向数据绑定

<li>居住城市
        <select name='city' id='city' [ngModel]='peopleInfo.city'>
          <option [value]='item' *ngFor="let item of peopleInfo.cityList">
            {{item}}
          </option>
        </select>
</li>

后端声明一个数组（cityList）和一个需要绑定的对象（city）

 public peopleInfo:any={
    cityList:['北京','河北','天津'],
    city:'河北'
｝

五、checkbox双向绑定

前端，&nbsp表示空格

 <li>爱好
        <span *ngFor="let item of peopleInfo.hobby; let key=index;">
          <input type="checkbox" [id]="'check+key'" [(ngModel)]="item.checked"/> <label [for]="'check'+key">{{item.title}} </label>

          &nbsp; &nbsp;
        </span>
 </li>

后端声明一个复杂的数组。

 public peopleInfo:any={  
    hobby:[{
      title:'eat',
      checked:false
    },
    {
      title:'sleep',
      checked:false
    },
    {
      title:'work',
      checked:true
    }]
  }