angular 笔记--双向绑定基本操练

angular 双向数据绑定语法形式：    [(ngModel)]="person.username"

其中需要注意的是 radio,   checkbox的属性绑定[for]  

 

一个简单的用户信息获取：

html

<div class="username">

    姓名：<input type="text" [(ngModel)]="person.username" />
<br><br>
    性别：
    <input value="m" type="radio" id="sex1" name="sex" [(ngModel)]="person.sex" checked=""><label for="sex1">男</label>
    <input value="wm" type="radio" id= "sex2" name="sex" [(ngModel)]="person.sex"><label for="sex2">女</label>
      <br><br>
    城市：
    <select name = 'city' id='city' [(ngModel)]="person.city">
        <option [value]='item' *ngFor="let item of person.cityList">{{item}}</option>

    </select>
      <br><br>
    爱好：
    <span *ngFor="let item of person.hobbys;let key =index">
//利用[for]属性实现点击文字也可以选中
        <input type="checkbox" [id]="'check'+key" [(ngModel)]="item.checked"><label [for]="'check'+key">{{item.title}}</label>
        &nbsp;&nbsp;
    </span>


    <br><br>
    备注：<br>
    <textarea [(ngModel)]="person.mark"></textarea>
    <br><br>
    <button (click)="click()" >提交</button>
    <br><br>
    
    <div>
        人员信息：{{person|json}}
     </div>
</div>

ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css']
})
export class FormComponent implements OnInit {
   person:any={
    username:"eeee",
    sex:"",
    cityList:[
      '北京',
      '上海',
      '成都'
    ],
    city:'成都',
    hobbys:[
      {
        title:'篮球',
        checked:true
      },
      {
        title:'羽毛球',
        checked:true
      },
      {
        title:'写代码',
        checked:true
      }
    ],
    mark:''

  }
  constructor() { }

  ngOnInit(): void {
  }
  click(){
    console.log(this.person);
  }
}

实现的效果：